element-ui 使用 Select 组件给 value 属性绑定对象类型

问题描述:当 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)
}

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值