Vue 检测数组更新
2018-07-05 本文已影响8人
一个冬季
1、列表集合检测动态更新
2、更新列表集合里面的某一项Item
1、列表集合检测动态更新
问题描述：后台给了我一个backList，但是我自己的JS是一个vm.List，如果我采用vm.List.push(backList);虽然检测到更新了，但是你console.log发现它的格式是这样的 [[{name:aaa,age:20},{name:bbb,age:30}]]。这样显然不满足我的条件。
解决办法：
vm.listView = vm.listView.concat(backList);
如上，就可以解决，你再次console.log，[{name:aaa,age:20},{name:bbb,age:30}]。
如果我是出于上拉刷新，下拉加载，那么就要这样弄
if (isPull) {//上拉加载
vm.listView = vm.listView.concat(backList);
} else if (!isPull && pageNoL == 1) {//下拉刷新
vm.listView = [];
vm.listView = vm.listView.concat(backList);
}
2、更新列表集合里面的某一项Item
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
</head>
<body>
<div id="app" v-for="(item, index) in list" :key="index" v-on:click="styleClick(item,index)" >
{{item.a}}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
list:[{a:1},{a:2}]
},
methods:{
styleClick:function (item,index) {
var newValue = vm.list[index];
if (item.a==1){
item.a = 5;
} else {
item.a = 10;
}
Vue.set(vm.list, index, newValue)
}
}
});
</script>
</body>
</html>
先获取到某项的Item，然后修改里面的值，通过Vue.set将值修改
