问题：当已经输入数字的时候，还触发了为空的校验，预期是已经输入年龄的时候不会校验，输入框没有值的时候才会触发校验的。
在网上查找了资料，el-input-number组件输入数字的时候无法实时触发change事件，需要使用@input.native来触发,一开始使用了也没有效果，后来加了this.$nextTick功能实现了。
// 解决el-input-number组件输入数字的时候无法实时触发change事件
validateNumber(value) {
this.$nextTick(() => {
if (value != undefined) {
this.$refs.numberValidateForm.clearValidate("age");
}
})
},实现功能的效果：
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue开发：解决el-input-number组件输入数字的时候无法实时触发change事件</title>
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
padding: 50px;
}
</style>
</head>
<body>
<div id="app">
<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" :rules="rules">
<el-form-item label="姓名" prop="name">
<el-input v-model="numberValidateForm.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input-number :min="0" controls-position="right" placeholder="请输入正整数" v-model.number="numberValidateForm.age"
@input.native="validateNumber"></el-input-number>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
<el-button @click="resetForm('numberValidateForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
numberValidateForm: {},
rules: {
name: [
{ required: true, message: '姓名不能为空', trigger: "change" },
],
age: [
{ required: true, message: '年龄不能为空', trigger: "change" },
]
}
}
},
created() {
},
methods: {
// 解决el-input-number组件输入数字的时候无法实时触发change事件
validateNumber(value) {
this.$nextTick(() => {
if (value != undefined) {
this.$refs.numberValidateForm.clearValidate("age");
}
})
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.numberValidateForm, '表单结果');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
})
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。