如何渲染数组以选择选项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和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>

因此,我们需要将每个key数组原因分配给标记的每个value参数,并将数组原因option呈现value为option标记的文本.

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

另外,不要忘记v-model指令,它在表单输入,textarea和select元素上创建双向数据绑定.这意味着,它会根据输入类型自动选择更新元素的正确方法.我们可以通过添加实现这一点selected的data定义中的Vue实例创建并添加v-model="selected"到select标签.