(Vue.js) 如何使用数据中的数值数组中的选项标签填充选择标签？
[英](Vue.js) How can I populate the select tag with option tag from array of number values in data?
问题描述
I would like to populate my select tag with options from an array variable which contains arrays of number values.
我想用包含数值数组的数组变量中的选项填充我的选择标记。 But the values that are reproduced seems to be blank但是复制出来的值好像是空白的
HTML: HTML：
<select required id="dropDown">
<option>Select here</option>
<option v-for="choice in choices">{{ choice }}</option>
</select>
Javascript: Javascript：
var vm = new Vue({
el: 'body',
data:{
'choices': [1,2,3,4,5]
}
});
Can someone point me of my mistake?有人可以指出我的错误吗？ Because I am just a beginner though, and I would like to learn from you guys.因为我只是一个初学者，我想向你们学习。
2 个解决方案
解决方案1
8 已采纳 2016-07-15 17:28:25
The el option should provide Vue with an existing DOM element to mount on. el选项应该为 Vue 提供一个现有的 DOM 元素来挂载。 You have provided a CSS selector for body, so Vue will try to mount on the body element.您已经为 body 提供了一个 CSS 选择器，因此 Vue 将尝试挂载在body元素上。
Otherwise your code is correct.否则你的代码是正确的。 Just wrap your HTML in body tags and it works!只需将您的 HTML 包装在body标签中即可！
var vm = new Vue({ el: 'body', data:{ 'choices': [1,2,3,4,5] } });
<!-- Load Vue JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script> <!-- add body tags so `el: 'body'` resolves to an HTML element --> <body> <select required id="dropDown"> <option>Select here</option> <option v-for="choice in choices">{{ choice }}</option> </select> </body>
解决方案2
0 2021-06-06 11:48:43
If you get your data from the backend, you need to follow another way.如果您从后端获取数据，则需要遵循另一种方式。 For example, I have a category list, which comes from the backend.例如，我有一个来自后端的类别列表。
<el-select
v-model="categorySelect.selected"
size="large"
name="category_id"
single
v-bind:placeholder="$t('products.category')"
>
<el-option
v-for="item in categorySelect.autocompleteItems"
:key="item.id"
:label="item.name_en"
:value="item.id"
></el-option>
</el-select>
Your script should looks like this :您的脚本应如下所示：
categorySelect: {
selected: [],
autocompleteItems: this.categoriesItem,
},
categoriesItem: {
required: false,
type: Object
},
and then, you need to get your data on your view like this :然后，您需要像这样在您的视图中获取数据：
:categories-item="{{$categories}}"
as you see the above code, you can fill your select list with a different list that comes from the backend.当您看到上面的代码时，您可以使用来自后端的不同列表填充您的选择列表。
Enjoy Your Code!享受您的代码！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.