我从API中得到了如下数组:
{"select1":"Select 1","select2":"Select 2","select3":"Select 3"}
我想将此数组渲染为option列表 Select .
我试过这样做，但我不知道如何填充值和文本.
我从API中得到了如下数组:
{"select1":"Select 1","select2":"Select 2","select3":"Select 3"}
我想将此数组渲染为option列表 Select .
我试过这样做，但我不知道如何填充值和文本.
根据文档，v-for允许您遍历对象的属性.
在本例中，对象是一个名为reasons的关联array.这意味着，这个数组有一个keys和values的列表.第一对(key:value)分别是"select1"和"Select 1".
How to render the values of these pairs?
要提取第一个项目"Select 1"，我们需要声明一对别名，比如key和item，然后使用{{...}}插值来渲染它.在本例中，item别名如代码示例所示:
var selector = new Vue({
el: '#selector',
data: {
selected: '',
reasons: {
"select1": "Select 1",
"select2": "Select 2",
"select3": "Select 3",
"select4": "Select 4",
"select5": "Select 5",
"select6": "Select 6",
"select7": "Select 7"
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="selector">
<select v-model="selected">
<option v-for="(item, key) in reasons" :value="key">
{{item}}
</option>
</select>
<br>
<br>
<span>Selected: {{ selected }}</span>
</div>Update
请记住，HTML标记select对列表中的每个项目都使用option标记.现在，这个option标签有一个value参数，在这个 struct 中有一个text:
<select>
<option value="select1">Select 1</option>
...
<option value="select7">Select 7</option>
</select>
因此，我们需要将每key个数组原因分配给option标记的每个value参数，并将value个数组原因呈现为option标记的文本.
<option v-for="(item, key) in reasons" :value="key">
{{item}}
</option>
另外，不要忘记v-model指令，它在表单输入、textarea和select元素上创建双向数据绑定.这意味着，它会根据输入类型自动 Select 更新元素的正确方式.我们可以通过在Vue实例创建中向data定义添加selected，并向select标记添加v-model="selected"来实现这一点.