element-ui动态删除表单项后导致表单验证报错"please transfer a valid prop path to form item!"


声明:本文转载自https://my.oschina.net/watcher/blog/1553069,转载目的在于传递更多信息,仅供学习交流之用。如有侵权行为,请联系我,我会及时删除。

问题

表单文档示例 http://element.eleme.io/1.4/#/zh-CN/component/form#biao-dan-yan-zheng 中

特殊情况下会有一个问题,猜测是异步导致的。

重现

情况如下:因某种需求(例如验证表单数据不能重复)删除一项动态表单后要立刻自动重新验证一下表单,那么就需要将例子修改为以下(部分,未修改部分省略)修改后例子

methods: {
      reCheck: function(formName) {
        // this.$refs[formName].validate()  // Error: please transfer a valid prop path to form item!
        // 正确方法如下,等待dom队列完成再调用
        this.$nextTick(this.$refs[formName].validate)
      },
      removeDomain(item) {
          var index = this.dynamicValidateForm.domains.indexOf(item)
          if (index !== -1) {
              this.dynamicValidateForm.domains.splice(index, 1)
            }
          this.reCheck('dynamicValidateForm')
      }
}


结论

以上例子中删除元素之间调用validate验证会导致报错(数据元素已删除,但是可能表单验证中的验证项目还未来得及删除),而稍经延迟后调用就没有问题。


文档:深入响应式原理-异步更新队列

本文发表于2017年10月19日 00:34
(c)注:本文转载自https://my.oschina.net/watcher/blog/1553069,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除.

阅读 25563 讨论 0 喜欢 5

抢先体验

扫码体验
趣味小程序
文字表情生成器

闪念胶囊

你要过得好哇,这样我才能恨你啊,你要是过得不好,我都不知道该恨你还是拥抱你啊。

直抵黄龙府,与诸君痛饮尔。

那时陪伴我的人啊,你们如今在何方。

不出意外的话,我们再也不会见了,祝你前程似锦。

这世界真好,吃野东西也要留出这条命来看看

快捷链接
网站地图
提交友链
Copyright © 2016 - 2021 Cion.
All Rights Reserved.
京ICP备2021004668号-1