Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Deep watch in not working on object Vue

I have a watcher setup on an array and I have deep watch enabled on it, however the handler function does not trigger when the array changes, applications is defined in the object returned in data. Here's the code:

  watch: {
    applications: {
      handler: function(val, oldVal) {
        console.log('app changed');
      },
      deep: true,
    },
    page(newPage) {
      console.log('Newpage', newPage);
    },
  },
like image 807
kumail Avatar asked Dec 06 '22 11:12

kumail


2 Answers

Vue cannot detect some changes to an array such as when you directly set an item within the index:

e.g. arr[indexOfItem] = newValue

Here are some alternative ways to detect changes in an array:

Vue.set(arr, indexOfItem, newValue)

or

arr.splice(indexOfItem, 1, newValue)

You can find better understanding of Array Change Detection here

like image 130
Clocher Zhong Avatar answered Dec 26 '22 00:12

Clocher Zhong


If you reset your array with arr[ index ] = 'some value', Vue doesn't track to this variable. It would better to use Vue array’s mutation method. These methods used to track array change detection by Vue.

It is worked for me.

like image 40
Chandan Kumar Gouda Avatar answered Dec 26 '22 00:12

Chandan Kumar Gouda