前阵子写项目的时候,遇到过关于Element表单验证导致的一个问题:
一开始我在Dialog 组件里录入表单信息,因为有几项信息是选填的,就没有绑定prop验证,然后在关闭窗口时按照惯例进行数据还原以及清除表单验证:
closeModal() {
// 关闭modal
this.restData();
this.$emit("close", false);
},
restData() {
//重置数据
this.personalForm = {};
this.$refs.personalForm.resetFields();
},
一开始的时候还没发现什么问题,但测试的时候,这个窗口在第二次打开后点击关闭时开始报错:
接下来就是各种逻辑打印,翻不起浪花来还白白浪费时间。问了前辈才知道是因为表单里有几项item没有绑定prop,可能就导致清除表单验证时索引出错之类的问题。
然后我就抱着半信半疑的态度先注释了那几项没有绑定prop的item,发现真的不会报错。就给那几项item绑定了prop,但因为又不需要真的验证,所以:
sender: [{ required: false }],
senderPhone: [{ required: false }],
senderEmail: [{ required: false }],
然后就可以了!!!
又是一次完美的踩坑