Question

当:selected使用option时，v-model道具未在Vue2中选择目标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将忽略初始值，已选中或已选择属性。在任何表格元素上找到!!
解决方案是删除：选择的绑定。并使用数据道具绑定到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 offical documentation

Answer 2

另一种解决方案是使用Float而不是v模型。

Double

然后要获取所选项目的值，请调用...

java.lang

Vue选择道具不使用v-model

2 个答案: