変数の変更を監視することができません

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).