"The reactivity of VueJs array of objects is not triggering properly when there is a change in

Question

My state includes an array of objects structured like this:

data() {
    return {
    users: [{id: 1, name: 'bob'}, {id: 2, name: 'bill'}]
    }
}

After modifying the data as shown below:

this.users[0].name = 'Mary'

The watcher assigned to the students property does not trigger. How can I ensure it runs?

Answer 1

Answer №1

Array mutations in Vue.js are not automatically detected when using direct index access to change an item or sub-field within it.

To address this issue, you can utilize the set method of the Vue object:

// Vue.set
const index = 0;
const newValue = { ...this.users[index], name: 'Mary' };

Vue.set(this.users, index, newValue);

Alternatively, you can manipulate the array using the splice method, which is internally overridden by Vue.js:

const index = 0;
const newValue = { ...this.users[index], name: 'Mary' };

// Using array manipulation
this.users.splice(index, 1, newValue);

Another approach is to follow the immutable data practice like so:

const newArray = [...this.users];
const newValue = { ...this.users[0], name: 'Mary' };
newArray[0] = newValue;

this.users = newArray;

Answer 2

Array mutations in Vue.js are not automatically detected when using direct index access to change an item or sub-field within it.

To address this issue, you can utilize the set method of the Vue object:

// Vue.set
const index = 0;
const newValue = { ...this.users[index], name: 'Mary' };

Vue.set(this.users, index, newValue);

Alternatively, you can manipulate the array using the splice method, which is internally overridden by Vue.js:

const index = 0;
const newValue = { ...this.users[index], name: 'Mary' };

// Using array manipulation
this.users.splice(index, 1, newValue);

Another approach is to follow the immutable data practice like so:

const newArray = [...this.users];
const newValue = { ...this.users[0], name: 'Mary' };
newArray[0] = newValue;

this.users = newArray;