vue2,使用lodash的remove方法删除数组项后,视图不更新

点击按钮后,可以在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}
    ]
  }
});

图片描述

图片描述

视图始终不变化,就是这个样子:
图片描述

阅读 7.3k
2 个回答

// 因为没有检测到数组更新。
Vue文档:数组更新检测

// 这里其实直接用filter即可。不需要用lodash
del:function(n){
    this.list = this.list.filter(sku) {
      return sku.count == 1;
    });
}

根据楼上的提示,我加了一句代码,它触发了视图更新,成功解决:
this.list.sort();

至于用不用lodash,本身并没有什么影响。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题