如何渲染阵列选择选项vue.js

Question

我有数组这样的API：

{"select1":"Select 1","select2":"Select 2","select3":"Select 3"} 

我想使这个数组option列表中选择。

我已经试过这样但我不知道如何填写的价值和文字。

Answer 1

根据文档，v-for允许您遍历对象的属性。

在这种情况下，您的对象是一个名为reasons的关联数组。这意味着，该阵列具有键和的值列表。第一对（键：值）分别为"select1"和"Select 1"。

如何渲染这些对的值？

好，以提取的值（"Select 1"）需要声明一对别名等key和value，然后使用{{...}}在这种情况下，value别名使其如图此代码示例中：

var selector = new Vue({ 
 
    el: '#selector', 
 
    data: { 
 
    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.2.6/vue.min.js"></script> 
 
<div id="selector"> 
 
    <select> 
 
    <option v-for="(value, key) in reasons" :value="key"> 
 
     {{value}} 
 
    </option> 
 
    </select> 
 
</div>

更新

请记住，HTML标记select对列表中的每个项目使用option标记。现在，这个option标签具有value参数和text像这样的结构：

<select> 
    <option value="select1">Select 1</option> 
    ... 
    <option value="select7">Select 7</option> 
</select> 

所以我们需要分配的数组原因到option标签的每个value参数每个key和渲染阵列的value原因为option标签的文字。

<option v-for="(value, key) in reasons" :value="key"> 
    {{value}} 
</option> 

Answer 2

您应该查看documentation for list rendering an object。

<select> 
    <option v-for="(reason, key) in reasons" 
      :value="key" 
      :key="key"> 
     {{reason}} 
    </option> 
    </select> 

Example。