如何传递对象数组以在 Vue 2.0 中选择选项

Question

我有一个我想从对象数组中填充的选择，例如

[{"id": 1, "name": "Some name"},
 ... 
{"id": 5, "name": "Another name"}]

它存储在Vue 的 data 属性中的项目中

var app = new Vue({
el: "#app",
data: {
    items: [],
....

    }
})

我正在尝试使用v-for和v-model那样做：

  <select id="categories" v-model="items">
      <option v-for="item in items" :value="item.id">{{ item.name }}</option>
  </select>

它不起作用，但是如果我用 int Array 尝试相同的代码，一切都很好。无法绕过它。

Answer 1

v-model 在选择上是针对选定的值。

<select id="categories" v-model="selectedValue">
  <option v-for="item in items" :value="item.id">{{ item.name }}</option>
</select>

添加selectedValue到您的数据中。

var app = new Vue({
  el: "#app",
  data: {
    items: [],
    selectedValue: null

  }
})

<select id="categories" v-model="selectedValue">
  <option v-for="item in items" :value="item.id">{{ item.name }}</option>
</select>

var app = new Vue({
  el: "#app",
  data: {
    items: [],
    selectedValue: null

  }
})