vue更新DOM nextTick

2017-04-18  本文已影响0人  cooqi

最近的项目,使用的是vue+amazeui
不知道大家有没有遇到过这种问题,当我们使用amaze组件的轮播图的时候,获取本地的图片数据是OK的,但是当我们调用接口数据的时候,图片并无显示,但在源码里面我们可以清楚地看到, 数据是已经获取并赋值进了dom的
这就是组件初始化不正确

官方文档里面是在建议js手动初始化
$('.am-slider').flexslider();
但并没有什么用,我们数据获取到,但Dom没有刷新
一时想不到好的方法,我就直接拼接然后插入
var a = ''; for(var i = 0; i < datas.LogoUrlInfo.toplist.length; i++) { a += '<li>![](' + datas.LogoUrlInfo.toplist[i].logurl + ')</li>' } $('#slide').append(a)
问题是解决了,但是总是觉得怪怪的,我不信吊炸天的vue没有更好的解决方案

最后百度,让我发现了nextTick
一下子打开新世界
Vue.nextTick(function() { //Dom更新后需要执行的代码 })

在我们数据调用完后加入
this.$nextTick(function(){ $('.am-slider').flexslider();//amaze 轮播初始化 })

vue果然是强大,很多时候,不是这个框架不好,是我们不会用,这次为解决这个问题,我翻了几遍vue官方文档,收获挺多,比如
v-if 是一个指令,需要将它添加到一个元素上。但是如果我们想切换多个元素呢?此时我们可以把一个 <template> 元素当做包装元素,并在上面使用 v-if。最终的渲染结果不会包含 <template> 元素。
v-for同理

``
由于 JavaScript 的限制, Vue 不能检测以下变动的数组:

当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如: vm.items.length = newLength

``
这个也是最近遇到的坑,解决方法官方文档说的非常清楚了
刚入vue不久,坑太多,只有边做边学

https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95

上一篇下一篇

猜你喜欢

热点阅读