javascript - 如何渲染数组以选择选项 vue.js

Question

我有来自 API 的数组:

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

我想将此数组渲染到 option list select。

我试过这样但我不知道如何填写值和文本。

Answer 1

根据文档，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 标签。