element-ui和vue表单(对话框)验证提示语(残留)清除操作

问题是这样的：

如果一个页面有多个按钮打开相同的element-ui的Dialog对话框，那么如果第一个点击"顺序"按钮出现红色验证提示语后， 再点击“取消”，或者点击页面空白处此对话框消失，而后再点击同一个“顺序”按钮亦或别的“顺序”按钮， 那么此红色提示依然存在，显然是无法忍受的，那么怎么去除呢，

但是,这样会页面调试模式会报错 “ Cannot read property 'resetFields' of undefined ” 错误, 应该是第一次弹出dialog对话框的时候没有弄到DOM里, 需要修改vue中的watch代码, 做个限定. 这样不但可以清除提示语, 还可以清空输入框里内容残留， 如下:

  let result = Vue.extend({
   name: 'recommend-list',
   template: template,
   watch: {
    dialogSequenceVisible: function (val,oldVla) {
     if (this.$refs['form'] != undefined) {
      this.$refs["form"].resetFields();
     }
    }
   },

补充知识：elementUI vue 编辑中的input的验证残留清除

当使用编辑的时候, 假如上次的验证没通过, 报红了, 下次再点击编辑的时候还会报红,因此要清除验证残留, 方式有两种:

this.$refs["from"].resetFields(); //移除校验结果并重置字段值

this.$refs["from"].clearValidate(); //移除校验结果

以上这篇element-ui和vue表单(对话框)验证提示语(残留)清除操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持来客网。