在 VueJS 中使用 v-for 循环填充 <select> <option>答案

【问题标题】：Populate <select> <option> using v-for loop in VueJS在 VueJS 中使用 v-for 循环填充 <select> <option>
【发布时间】：2021-01-07 17:38:37
【问题描述】：

我是 VueJS 的新手，我只是想知道如何使用 v-for 循环填充选择选项框。

<select>
    <option v-for="person in persons" :value="personid">{{ personname }}</option>
</select>

这是我的清单。

"persons": {
        "2": "Person1",
        "3": "Person2",
        "4": "Person3"
    }

这是我们想要的输出。

<select id="persons">
    <option value="3">Person1</option>
    <option value="4">Person2</option>
</select>

【问题讨论】：

这里是你的答案：vuejs.org/v2/guide/forms.htmll#Select
有据可查：v-for with an Object.

标签： javascript arrays vue.js vuejs2 frontend

【解决方案1】：

幸运的是，Vue 可以遍历 Object 中的属性，如 v-for with an Object 中所述。

我还在下面包含了一个 sn-p，它应该可以帮助您实现您想要的。

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: "#app",
  data: () => {
    return {
      persons: {
        "2": "Person1",
        "3": "Person2",
        "4": "Person3"
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select id="persons">
    <option v-for="(name, id) in persons" :value="id">{{name}}</option>
  </select>
</div>

【讨论】：

【解决方案2】：

您几乎完成了，只需改进该选择：

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

【讨论】：