: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
最佳答案
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
关于javascript - Vue 选择的 Prop 不适用于 v-model,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46772060/