Vue 检测数组更新

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将值修改

Vue 检测数组更新

1、列表集合检测动态更新

2、更新列表集合里面的某一项Item

推荐阅读更多精彩内容