觀察變量變化不起作用

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)（單張JS）值。我看到console.log輸出，所以似乎數據正在改變。

Answer 1

如果你想改變一個數組的值，你必須使用特殊的數組擴展方法Vue.set和Vue.delete。

Due to limitations of JavaScript, Vue cannot detect the following changes to an Array:

• When you directly set an item with the index, e.g. vm.items[0] = {} ;

• When you modify the length of the Array, e.g. vm.items.length = 0 .

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

這個問題在common gotchas

When you modify an Array by directly setting an index (e.g. arr[0] = val) or modifying its length property. Similarly, Vue.js cannot pickup these changes. Always modify arrays by using an Array instance method, or replacing it entirely. Vue provides a convenience method arr.$set(index, value) which is just syntax sugar for arr.splice(index, 1, value).