任天君
2021-07-19 22:45
采纳率: 33.3%
浏览 306
已结题

Vue新增表单数据增加了数据校验之后再次添加数据重置仍存在原始数据问题

以下图是在新增完一次数据之后,再次点击添加的两个界面
图一:点击添加按钮出现的界面
img

图二:点击重置之后原始数据出现的界面
img

图二是产生的现象,经各种尝试无效。

以下是vue关键代码:
新增框:
img

重置语句:
resetForm(formName) {
this.$refs[formName].resetFields();
}

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • 任天君 2021-07-23 18:03
    已采纳

    继2021-07-21 13:04写的解答,这次已经解决了这个小问题。在回忆一下问题本身,第一次新增之后第二次新增会有红色提示,之前使用this.$refs['addForm'].clearValidate()方法,这个方法是用于清除数据校验的,理论上是可以实现的,但是控制台报错Cannot read property ‘clearValidate‘ of undefined“,经查验并参考网址:https://blog.csdn.net/qq_36437172/article/details/107348939,问题解决,产生问题的原因是Dom 没有加载完成,导致获取不到refs元素,因此,需要使用
    this.$nextTick(()=>{
    this.$refs['addForm'].clearValidate();
    })
    来实现这一功能,那就得说一下$nextTick()函数的作用了,这个方法的作用基本功能就是获取更新之后的DOM。具体细节有待查验。目前只能理解到这一步,之后在来更新吧。

    已采纳该答案
    评论
    解决 无用
    打赏 举报
查看更多回答(3条)

相关推荐 更多相似问题