Vue在页面数据渲染完成之后的调用方法
2018-09-11 11:41
856 查看
在使用Vue框架的时候,有时候需要在Vue在页面数据渲染完成之后调用方法,不然获取不到准确的数据,特别是在获取列表的高度的时候,由于数据没有加载完,获取不到准确的高度。之前在使用jquery的时候,有ready可以帮助我们实现,但是Vue不存在此类方法,我们需要结合watch和this.$nextTick()来实现。
nextTick:在下次 DOM 更新循环结束之后执行延迟回调。
watch:用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。
之前我是这样子使用nextTick的:
mounted:{ this.$nextTick(function(){ /////方法 }) }
经测试发现实现不了所需要的效果,只有结构,没有数据,即获取不到想要的高度
后发现需要结合watch监听某个属性:
watch:{ asyncArray:function() this.$nextTick(function(){ //////方法 }); } }
经测试可用!
以上这篇Vue在页面数据渲染完成之后的调用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Vue在页面数据渲染完成之后调用
- vue2.0$nextTick监听数据渲染完成之后的回调函数方法
- vue-cli 更改数组中的数据,页面dom及时渲染 Vue.set方法
- vue 刷新之后 嵌套路由不变 重新渲染页面的方法
- Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
- javaWeb页面中Ajax原始调用方法,及数据转换成Json的原始方法总结
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法:服务器端和客户端数据类型的自动转换:复杂类型
- -将DropDownList控件绑定 到GridView控当中,并调用方法给DropDownList控件在页面进行数据绑定
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(10):服务器端和客户端数据类型的自动转换:以XML方式序列化数据、小结
- C#调用asp页面或php页面,反回页面数据方法
- jquery里面调用getjson方法,将list类型转换为json格式数据,在页面迭代显示
- DWZ 用dialog调用MVC自动生成的密码修改页面一直出现“数据加载中,请稍等...”和去掉“数据加载中,请稍等”的方法
- phpcms v9使用GET调用指定id文章内容、页面数据方法
- jquery $.jBox弹窗 父窗体调用子窗体方法,保存子窗体页面数据
- 黄聪:wordpress后台,修改数据表前缀之后显示“您没有足够的权限访问这个页面”的解决方法
- jquery里面调用getjson方法,将list类型转换为json格式数据,在页面迭代显示
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(8):服务器端和客户端数据类型的自动转换:数组类型
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(9):服务器端和客户端数据类型的自动转换:DataTable和DataSet
- 在CHtmlView中,判断一个页面加载完成的准确方法,解决OnDocumentComplete多次调用问题
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(9):服务器端和客户端数据类型的自动转换:DataTable和DataSet