el-radio-group 点击事件无效时,保持旧值

场景:在点击el-radio时,需要先判断一下,根据接口请求,判断结果决定本次点击是否有效,或二次确认时选择了取消。
1.使用v-model双向绑定,不能满足场景需求;
2.若使用value,加上@change事件,发现不能获取到点击的单选值,change事件传的时旧的value
3.结合源码分析,可以使用value,配合@input事件(需要注意版本问题)
源码如下:模板中绑定的是v-model=“model”,model是一个计算函数,,而@change事件handleChange,提交的是model,查看计算函数的get ,当前el-radio是嵌套在el-radio-group中的就取el-radio-group的value,所以value不会改变;
代码1:

 <input
        ref="radio"
        class="el-radio__original"
        :value="label"
        type="radio"
        aria-hidden="true"
        v-model="model"
        @focus="focus = true"
        @blur="focus = false"
        @change="handleChange"
        :name="name"
        :disabled="isDisabled"
        tabindex="-1"
      >

代码2

 computed: {
  model: {
        get() {
          return this.isGroup ? this._radioGroup.value : this.value;
        },
        set(val) {
          if (this.isGroup) {
            this.dispatch('ElRadioGroup', 'input', [val]);
          } else {
            this.$emit('input', val);
          }
          this.$refs.radio && (this.$refs.radio.checked = this.model === this.label);
        }
      }
 }

代码3:

handleChange() {
        this.$nextTick(() => {
          this.$emit('change', this.model);
          this.isGroup && this.dispatch('ElRadioGroup', 'handleChange', this.model);
        });
      }
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值