注意变量变化不起作用

Question

我需要检查变量rasters_previews_list是否有变化.这是我的代码:

var userContent = Vue.extend({
  template: '<p>Some template</p>',
  data: function ()  {
    return {
      rasters_previews_list: []
    }
  },
  watch: {
    'rasters_previews_list': function(value, mutation) {
      console.log("Value changed");      
    }
  }
});

但在控制台中,我没有看到Value changed它何时获得新数据.

数据更改功能:

map.on('draw:created', function (e) {
//...

   Vue.http.post('/dbdata', DataBody).then((response) => {
      userContent.rasters_previews_list = response; // putting JSON answer to Component data in userContent

      console.log(response);


      }, (response) => {
          console.log("Can't get list rasters metadata from DB. Server error: ", response.status)
      });

我改变了map.on('draw:created', function (e)(Leaflet JS)中的值.我看到console.log输出,所以数据似乎在变化.

Answer 1

如果要更改数组的值,则必须使用特殊的数组扩展方法Vue.set和Vue.delete.

由于JavaScript的限制,Vue无法检测到对数组的以下更改:

• 直接设置带索引的项目时,例如vm.items[0] = {};

• 修改数组的长度时,例如vm.items.length = 0.

https://vuejs.org/api/#Vue-set

常见陷阱中也提到了这个问题

通过直接设置索引(例如arr [0] = val)或修改其长度属性来修改数组.同样,Vue.js无法获取这些更改.始终使用Array实例方法修改数组,或者完全替换它.Vue提供了一个方便的方法arr.$ set(index,value),这只是arr.splice(index,1,value)的语法糖.