码迷,mamicode.com
首页 > 其他好文 > 详细

this.$nextTick()的使用

时间:2020-03-15 20:25:49      阅读:73      评论:0      收藏:0      [点我收藏+]

标签:会员   问题   ted   图片   赋值   vue   基本   快速   create   

背景

在一个vue结合elementui的项目实现点击再一次增加会员的按钮时,清空上一次输入框里的数据,采用this.$refs[‘ruleForm‘].resetFields(),但是却报错,无法获取dom。那么此时快速的解决办法就是使用this.$nextTick()方法。

使用场景

this.$nextTick()方法主要是用在随数据改变而改变的dom应用场景中,vue中数据和dom渲染由于是异步的,所以,要让dom结构随数据改变这样的操作都应该放进this.$nextTick()的回调函数中。created()中使用的方法时,dom还没有渲染,如果此时在该钩子函数中进行dom赋值数据(或者其它dom操作)时无异于徒劳,所以,此时this.$nextTick()就会被大量使用,而与created()对应的是mounted()的钩子函数则是在dom完全渲染后才开始渲染数据,所以在mounted()中操作dom基本不会存在渲染问题。

使用具体方式

技术图片
技术图片

this.$nextTick()的使用

标签:会员   问题   ted   图片   赋值   vue   基本   快速   create   

原文地址:https://www.cnblogs.com/shemingxin/p/12499705.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!