（Vue.js）如何使用数据中数值数组中的选项标记填充选择标记？
Posted
技术标签:
【中文标题】（Vue.js）如何使用数据中数值数组中的选项标记填充选择标记？【英文标题】：(Vue.js) How can I populate the select tag with option tag from array of number values in data? 【发布时间】：2016-11-18 23:34:43 【问题描述】：我想用包含数值数组的数组变量中的选项填充我的选择标记。但是被复制的值似乎是空白的
html：
<select required id="dropDown">
<option>Select here</option>
<option v-for="choice in choices"> choice </option>
</select>
var vm = new Vue(
el: 'body',
data:
'choices': [1,2,3,4,5]
);
有人能指出我的错误吗？因为我只是一个初学者，我想向你们学习。
【问题讨论】：
【参考方案1】：el 选项应该为 Vue 提供一个现有的 DOM 元素来挂载。你已经为 body 提供了一个 CSS 选择器，所以 Vue 会尝试安装在 body 元素上。
否则您的代码是正确的。只需将您的 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】：如果您从后端获取数据，则需要采用另一种方式。 例如，我有一个类别列表，它来自后端。
<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>
您的脚本应如下所示：
categorySelect:
selected: [],
autocompleteItems: this.categoriesItem,
,
categoriesItem:
required: false,
type: Object
,
然后，您需要像这样在视图中获取数据：
:categories-item="$categories"
如您所见，您可以使用来自后端的不同列表填充您的选择列表。
享受您的代码！
【讨论】：
以上是关于（Vue.js）如何使用数据中数值数组中的选项标记填充选择标记？的主要内容，如果未能解决你的问题，请参考以下文章
Vue JS - 在触发函数之前检查数组中的所有项目是不是都已加载
如何使用 Vue.js 为数组（数据）中的所有对象添加属性？
如何从对象数组中获取特定数据并存储在js（vue js）中的新数组中
如何解决 Vue.js 中的“相邻 JSX 元素必须包含在封闭标记中”问题
如何使用 Vue.js 将 DataTable() 与数组中的数据（v-for 循环）附加到现有的 HTML <table>？