Question

我有一个选择，我希望从像

这样的对象数组填充

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

存储在Vue

的数据属性中的项中

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

select上的

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>

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

1 个答案: