javascript - Vue 选择的 Prop 不适用于 v-model

Question

:selected prop 没有选择目标 option在 Vue2 中我使用 v-model对于 select :

模板

...
<select v-model="form.item">
    <option :value="item.id" v-for="(item, index) in items" :selected="item.status == 2">{{ item.name }}</option>
</select>
...

脚本

data: function () {
    return {
        items: [{id:1, name: "foo", status: 1},{id: 3, name: "bar", status: 2}],
        form: {item: null}
    }
}

在这种情况下，安装后没有选择的选项。

我怎样才能解决这个问题？

备注

当我删除 v-model它工作正常(默认选择目标 option)但我没有所选 option 的值在 form.item

Answer 1

v-model 将忽略 初始值，勾选或已选择属性。
在任何表单元素上找到
解决方案是删除 :selected 绑定(bind)。并使用数据 Prop 绑定(bind)到 v-model

<select v-model="form.selectedItem">
   <option :value="item.id" v-for="(item, index) in items">{{ item.name }}
   </option>
</select>

将 vue 实例声明为

data() {
 return {
  selectedItem: 2
 }
}

link to official documentation