[Vuejs]-How to get changes in the object properties inside the array with vue $watch?

by

2👍

✅

There is a Javascript limitation – if you change array elements directly (e.g. this.array[0].foo = 'bar'), Vue cannot track these changes, hence the watcher will not be triggered.

It will be triggered though if you use any of Array.prototype functions, like push, pop or will re-assign array.

So the most basic solution will look this way:

change: function () {
  let questions = this.Questions;
  questions[0].foo = 5;

  this.Questions = questions;
  
  /* or
   let index = 0;
   let question = this.Questions[index];
   question.foo = 5;
   this.Questions.splice(index, 1, question);
  */
}

Updated jsFiddle: here

Stuff to check out: Arrays reactivity in Vue.js

👤euvl

Leave a comment