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

el-input-number组件添加必填校验，不使用组件自带增减符号进行填充，手动填充值无法及时清除校验提示，组件失去焦点时才会消失。希望在输入值之后即时清除校验提示。解决方案<el-input-numberv-model="form.eventDisposalRange":min="1"label="描述文字":disabled="edit"@input.native="eventDis

若♀阳

10630人浏览 · 2021-11-03 17:58:48

若♀阳 · 2021-11-03 17:58:48 发布

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博客)