VUE Element UI中el-input-number组件无法实时触发change事件

el-input-number组件添加必填校验,不使用组件自带增减符号进行填充,手动填充值无法及时清除校验提示,组件失去焦点时才会消失。

希望在输入值之后即时清除校验提示。

解决方案,将change改为input并添加native.

 <el-input-number
     v-model="form.eventDisposalRange"
     :min="1"
     label="描述文字"
     :disabled="edit"
     @input.native="eventDisposalRangeChange()"
  />




methods:

    eventDisposalRangeChange(value) {
        if (value != undefined) {
          this.$refs.form.clearValidate("eventDisposalRange");
        }
    },

添加.native的解释:

v-on 是对 Vue 的事件体系封装后的 API 接口,官方文档中指出Vue 使用的是一套自己的事件传递机制,如 @click 等事件是经过 Vue 封装的。所以在一些实际上处理 DOM 原生事件的场合需要添加额外的标识符。

而.native就是给组件绑定原生事件采用的方法 (vue .native_DreamFJ的博客-CSDN博客)



 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值