我有来自 API 的数组:
{"select1":"Select 1","select2":"Select 2","select3":"Select 3"}
我想将此数组渲染到 option
list select。
最佳答案
根据文档,v-for
允许您遍历对象的属性。
在这种情况下,您的对象是一个名为reasons
的关联数组。这意味着,这个数组有一个 keys 和 values 的列表。第一对 (key:value) 分别是 "select1"
和 "Select 1"
。
如何呈现这些对的值?
好吧,要提取第一项 “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>
更新
请记住,HTML 标记 select
为列表的每个项目使用 option
标记。现在,这个 option
标签有一个 value
参数和一个 text
就像这个结构:
<select>
<option value="select1">Select 1</option>
...
<option value="select7">Select 7</option>
</select>
因此,我们需要将数组 reasons 的每个 key
分配给 option
标签的每个 value
参数并渲染 数组原因的值
作为option
标签的文本。
<option v-for="(item, key) in reasons" :value="key">
{{item}}
</option>
此外,不要忘记 v-model
指令,它在表单输入、文本区域和选择元素上创建双向数据绑定(bind)。这意味着,它会根据输入类型自动选择正确的方式来更新元素。我们可以通过将 selected
添加到 Vue
实例创建中的 data
定义并添加 v-model="selected"
到 select
标签。
关于javascript - 如何渲染数组以选择选项 vue.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43461752/