Watch variable changes not working

Question

I need to check the rasters_previews_list variable for a change. Here is my code:

 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"); } } }); 

But in the console, I do not see Value changed when it received new data.

Data Change Function:

 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) }); 

I am changing the value in map.on('draw:created', function (e) (JS flyer). I can see the output of console.log, so the data seems to change.

Answer 1

If you want to change the value of the array, you will have to use the special extension methods Array Vue.set and Vue.delete .

Due to JavaScript limitations, Vue cannot detect the following changes to the array:

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

• When you change the length of an array, for example, vm.items.length = 0 .

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

This issue is also mentioned in common errors.

When you modify an array by directly setting the index (for example, arr [0] = val) or by changing its length property. Likewise, Vue.js cannot transfer these changes. Always modify arrays using the array instance method or completely replace it. Vue provides the convenience method $ set (index, value), which is just syntactic sugar for arr.splice (index, 1, value).