Vue 使用 select、v-for 和 v-model 预选值

Question

我正在使用 select 和 v-model 并有 v-for 和对象作为值的选项。选项是由 id 标识的一些元素。如何根据自定义相等性预先选择选项（在本例中为相等 id 字段）？我正在寻找类似于 angularjs 的 track by 来自 ng-options 的东西。

https://jsfiddle.net/79wsf1n4/5/

如何使用具有相同 id 的值预先选择输入？

模板：

 <div id="vue-instance">
  <select v-model="selected">
    <option v-for="item in inventory" :value="item" :key="item.id">
      {{ item.name }}
    </option>
  </select>
  <p>
    {{ selected.id }}
  </p>
</div>

js：

 var vm = new Vue({
  el: '#vue-instance',
  data: {
    inventory: [
      {name: 'MacBook Air', id: 1},
      {name: 'MacBook Pro', id: 2},
      {name: 'Lenovo W530', id: 3},
      {name: 'Acer Aspire One', id: 4}
    ],
    selected: {
        id: 2
    }
  }
});

原文由 Tuan Pham 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以根据 Dharmendra 的回答添加选定的属性。

然而，问题是您没有为您选择的属性分配一个有效的对象。 Vue 会尝试在你的选项列表中寻找相同的对象，它会通过对象相等比较来做到这一点。

目前我不知道是否可以告诉 Vue 将初始选择基于属性，但是一个非常简单的解决方案是在创建的生命周期回调中根据 ID 自己分配选定的属性：

 var vm = new Vue({
  el: '#vue-instance',
  data: {
    inventory: [
      {name: 'MacBook Air', id: 1},
      {name: 'MacBook Pro', id: 2},
      {name: 'Lenovo W530', id: 3},
      {name: 'Acer Aspire One', id: 4}
    ],
    selected: 2
  },
  created: function() {
        this.selected = this.inventory.find(i => i.id === this.selected);
  }
});

我也更新了你的 小提琴。

原文由 thomaux 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您必须更改为选项分配价值的方式。将此 :value="item" 更改为 v-bind:value="item" 。

HTML 部分

<select class="form-control" name="template" v-model="selected">
    <option v-for="item in inventory" v-bind:value="item">
       {{ item.name }}
    </option>
</select>

JS部分

new Vue({
  el: '#selector',
  data: {
    ...
    selected: {name: 'MacBook Pro', id: 2}
  }
})

这是一个工作 小提琴

原文由 Dharmendra Poonia 发布，翻译遵循 CC BY-SA 3.0 许可协议