手表不显示变量变化

Question

我有数组rasters_previews_list 和数据。

  methods: 
  { 
      removeit: function (index) 
      {
        this.rasters_previews_list.splice(index, 1)
      }

  },

 watch:
  {
    rasters_previews_list : function(oldval, newval) 
    {
      console.log("Value changed"); 
      console.log("oldval: ", oldval); 
      console.log("newval: ", newval); 

    }

  }

输出：

oldval: Object1: Object2: Object3
newval: Object1: Object2: Object3

新旧都一样！但是元素被删除了！

splice 是否将数组大小更新为Vue-delete？

每次我进入控制台都等于oldval 和newval 的问题。我知道 js 有一些限制，例如它不可能跟踪数组更改。而 Vue 为此使用方法 set。也许是同样的情况？还是其他问题？

实际工作代码：http://5.200.52.99:8080/ 以用户身份登录。选择带有多边形的欧洲，然后尝试使用X 按钮从面板中删除已创建的图像。 Chrome 控制台将显示 2 个相同的数组。

任务是在http://vuejs.org/guide/#All-Together-Now 和watch 等应用中跟踪价值变化

Answer 1

免责声明：我知道您使用的是.slice()。所以只要你使用 splice 这个答案是无效的。但我会把它留在这里作为记录。答案还包含文档链接。

是的，.splice() 更新数组。

---

不，vuejs 不跟踪此类数组突变：

根据documentation：

Vue.js 包装了观察到的 Array 的变异方法，因此它们也将 触发视图更新。包装的方法是：

• 推()
• pop()
• shift()
• unshift()
• 拼接()
• 排序()
• 反向（）

和

filter()、concat() 和 slice()，它们不会改变原始数组，但总是返回 一个新数组

所以想法是用一个新数组替换你的数组：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})