带有选择、v-for 和 v-model 的 Vue 预选值

Question

我正在使用selectwithv-model并且有选项 withv-for和 object 作为值。选项是一些由 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
    }
  }
});

Answer 1

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

然而，问题是您没有为所选属性分配有效对象。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);
  }
});

我也更新了你的小提琴。