有很多人遇到过这个问题,但是一般都是因为prop没写对,或者没有在data里声明;但我遇到的情况这两者都不是。代码如下:
<template>
<el-form :rules="rules">
<el-form-item prop="value">
<el-input v-model="form.value"/>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
var validator = (rule, value, callback) => {
if (!value) {
console.log(value);
callback(new Error('请输入'));
} else {
callback();
}
};
return {
form: {
value: ''
},
rules: {
value: [{ validator, trigger: 'blur' }]
}
};
}
};
</script>
这里控制台会一直输出undefined。
排查之后发现,因为<el-form>
标签没有绑定model……不是只给<el-input>
绑定v-model就可以的,同时还要指定model。正确写法应该如下:
<template>
<!--要在这里指定model-->
<el-form :model="form" :rules="rules">
<el-form-item prop="value">
<el-input v-model="form.value"/>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
var validator = (rule, value, callback) => {
if (!value) {
console.log(value);
callback(new Error('请输入'));
} else {
callback();
}
};
return {
form: {
value: ''
},
rules: {
value: [{ validator, trigger: 'blur' }]
}
};
}
};
</script>
总结一下,目前遇到的这个报错,有三种可能:
<el-form-item>
上的prop名称不对,应当与rules中的名称一致;- 绑定的属性没有在data中声明;
- 没有在
<el-form>
上指定model。