点击按钮后,可以在vue-devtools中观察到,vue数据并未马上变化 ,但是点击vue-devtools的刷新按钮后,数据变化了,用console.table输出,也能看到数据由4条变为2条了。
但视图并不变化!!
请问原因?如何解决?
<tr v-for="(sku,index) in list">
<td>{{sku.tit}}</td>
<td>{{sku.price}}</td>
<td>{{sku.count}}</td>
</tr>
<button @click="del">删除选定项</button>
...
var vm = new Vue({
el: '#app',
methods:{
del:function(n){
_.remove(this.list, function(sku) {
return sku.count == 1;
});
}
},
data: {
list:[
{"tit":"1号对象", "price":10 , count:1},
{"tit":"2号对象", "price":20 , count:2},
{"tit":"3号对象", "price":30 , count:2},
{"tit":"4号对象", "price":40 , count:1}
]
}
});
视图始终不变化,就是这个样子:
// 因为没有检测到数组更新。
Vue文档:数组更新检测