上一篇
下一篇
疑问已解决：vue.js在采用ajax方式读入数据后，无法激活slide插件的滑动行为已经解决
作者:admin 日期:2016-01-22
在vue.js的git上面提交的issue:
我在mui+vue.js构建一个slide-pic组件，图片数据用ajax方式获取，vm数据能获取到，dom也发生了相应的改变。但数据读入后，无法激活slide组件的滑动行为。
以下是我做的一些探索:
直接使用vue初始化数据（非ajax）可以激活滑动行为。
使用jquery的append方式，把数据结合到dom后，也可以激活。
我将mui的slide-pic组件换成另一个滑动图插件TouchSlide1.1后，同样的现象，用vm方式无法激活。
请问这是什么原因？到底是vue还是mui/TouchSlide 插件机制的问题。
XML/HTML代码
- 以下是无法激活滑动的主要代码：
- <div id="slider" class="mui-slider" >
- <div class="mui-slider-group">
- <div class="mui-slider-item" v-for="el in list"><img :src="el.picUrl"> </div>
- </div>
- </div>
- <script>
- var vm = new Vue({
- el: '#slider',
- data: {list: [] }
- });
- // 读取图片slide
- mui.ajax({ url: "shopData/slidePic.json", dataType: "json",
- success: function(data){
- vm.list = data.list;
- mui("#slider").slider({
- interval: 3000
- });
- }
- });
- </script>
- ----------------------------------------------
- 以下是可以成功激活的代码：
- mui.ajax({ url: "shopData/slidePic.json", dataType: "json",
- success: function(data){
- for (var i = 0; i < data.list.length; i++) {
- $(".mui-slider-group").append(
- '<div class="mui-slider-item" ><img src="'+ data.list[i].picUrl + '"> </div>'
- );
- }
- mui("#slider").slider({
- interval: 3000
- });
- }
- });
此问题由VUE及MUI的技术版主解答了，较常见，用nextTick就解决了。
代码如下：
XML/HTML代码
- vm_slide.$nextTick(function () {
- // DOM 现在更新了
- mui("#slider").slider({
- interval: 3000
- });
- })
[本日志由 admin 于 2016-01-25 10:17 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: mui vue slider ajax 
相关日志:
评论: 0 | 引用: 0 | 查看次数: 29723
发表评论
