element select

本文探讨了Vue中element-select组件的选择更新问题,介绍了如何通过$forceUpdate()解决对象嵌套过深导致的视图不更新,并讲解了如何正确处理change事件参数传递及获取option的label值。
摘要由CSDN通过智能技术生成

1) 选择后不更新
element select选择后不更新
可能因为对象包对象,太深了。视图监测不到。
需要$forceUpdate()强刷视图

<el-select v-model="hardForm.server"
            placeholder="请选择"
            @change="$forceUpdate()">
   <el-option v-for="item in hardServerList"
              :key="item.value"
              :value="item.value">
   </el-option>
 </el-select>

2) change事件传参

<div v-for="(item,index) in dataList"
 :key="index">
  <el-select size="mini"
             @change="(val)=>{ changeRange(val,index)}">
  </el-select>
</div>

changeRange(val, index) {
  console.log(val) // 选择内容
  console.log(index) // for循环里的第几个
}, 

3) 获取label的值
默认是只能获取到value的值,拿不到label的值
拿到value之后,遍历option数组,找到对应的label

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值