怎样监听vue.js中v-for全部渲染完成
一个是`Vue.nextTick(callback)`,当数据发生变化,更新后执行回调。
另一个是`Vue.$nextTick(callback)`,当dom发生变化,更新后执行的回调。
栗子:
...
<ul id="demo">
<li v-for="item in list">{{item}}</div>
</ul>
...
new Vue({
el:'#demo',
data:{
list=[0,1,2,3,4,5,6,7,8,9,10]
},
methods:{
push:function(){
this.list.push(11);
this.nextTick(function(){
alert('数据已经更新')
});
this.$nextTick(function(){
alert('v-for渲染已经完成')
})
}
}
})
1、把academyList替换为新数组。
2、官网文档“以下两种数据变化vue无法检测:
1)通过索引修改值。
2)改变数组长度。”。。?赋值新数组不属于以上两种,有数据改变,就会有更新,记得在对应vue实例中定义academyList:[]这个数组,然后方法中赋值this.academyList就可以。
如:
(1)$.getJSON("<%=ctx%>/course/getTerms", function(data){ if ("success" == data.result) {;
(2)$("#terms").html("");
(3)$("#terms").append("<option value=''></option>");
(4)for(var i=0 ; i<data.data.length ; i++){;
(5)var option = $("<option></option>");
(6)option.text(data.data[i]);
(7)option.val(data.data[i]);
(8)$("#terms").append(option);
(9)};
(10)$("#terms").chosen({search_contains: true});
(11)$("#terms").trigger('chosen:updated');
(12)};
(13)});
(14)$("#academys").change(function () {;
(15)academyId = $("#academys option:selected").val();
(16)groupId = null;
(17)datashow.update();//赋值给名称为datashow的Vue,update的方法里包含了对academyList的赋值;
(18)})。