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

Question

我有一个select，我想从对象数组中填充它

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

它存储在 Vue 数据属性的 items 中

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 数组尝试相同的代码，一切都很好。 无法绕过它。

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

  }
})

const items = [{"id": 1, "name": "Some name"},
{"id": 5, "name": "Another name"}]

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

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <select id="categories" v-model="selectedValue">
      <option v-for="item in items" :value="item.id">{{ item.name }}</option>
  </select>
  
  Selected Value: {{selectedValue}}
</div>