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

common gotchas

中也提到了这个问题

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

注意变量变化不起作用

1 个答案: