问题描述:当 value 属性绑定的是对象类型时,回显数据是,下拉框选项都是高亮选择样式,同时切换选项时,绑定的 v-model 视图没有对应改变。
1.value 绑定的是对象时,在 el-select 添加 value-key="id"属性,el-option中添加 :key="item.id" 属性,其绑定的 id 必须具有唯一性。
2.value-key 的值与 key 绑定的属性值对应。
-
<el-form-item
-
label="货物信息"
-
prop="goodsInfo"
-
>
-
<el-select
-
v-model="baseForm.goodsInfo"
-
placeholder="请选择"
-
value-key="itemName"
-
@change="changeGoodsInfo"
-
>
-
<el-option
-
v-for="item in goodsCategoryData"
-
:key="item.itemName"
-
:label="item.itemName"
-
:value="item"
-
/>
-
</el-select>
-
</el-form-item>
我们如何强制更新视图呢?下拉选择中添加 change 事件获取选中值,使用 Vue 2.x 版本的 vm.$set 进行更新视图。
-
changeGoodsInfo (value) {
-
this.$set(this.baseForm, 'goodsInfo', value)
-
}