vue重置数据并移除el-form校验结果

  • Z时代
  • 2024-02-09
  • 分类：IT

vue重置数据并移除el-form校验结果

技术栈：vue + element-ui

场景：dilog有一个form表单，第一次打开的时候填写数据并校验，当关闭dilog的重新打开的时候需要重置data里的数据并移除校验结果

处理方式：我使用下面的方式来重置数据并移除校验

onClose () {
     Object.assign(this.$data, this.$options.data())
     this.$refs['form'].resetFields();
}

但是这样发现数据确实重置了，但是input的校验结果全部为空时候的错误校验，但是如果改成下面的方式则可以完美解决：

onClose () {
      Object.assign(this.$data, this.$options.data())
      this.$nextTick(() => {
        this.$refs['form'].resetFields();
      })
}

为什么放到$nextTick里再重置表单校验就没问题了呢？Object.assign(this.$data, this.$options.data())是同步的重置数据，为什么需要在DOM更新完成后再移除校验呢？

回答：

Object.assign修改了数据，会触发异步更新，如果直接resetFields，就会先resetFields，再更新，更新的时候又会发生校验失败的情况。而加了一层$nextTick，就是先更新，更新的时候虽然会校验，但是后面resetFields会移除校验

以上是 vue重置数据并移除el-form校验结果 的全部内容， 来源链接： utcz.com/p/936726.html

回到顶部