I have an array of objects in my state like so:
data() {
return {
users: [{id: 1, name: 'bob'}, {id: 2, name: 'bill'}]
}
}
When I change the data like so:
this.users[0].name = 'Mary'
A watcher that I have for the students property does not run, how do I make it run?
Vue.js cannot detect mutations to array when you change any item or sub-field of a item using direct index access.
To do this, you can use set method of Vue object:
// Vue.set
const index = 0;
const newValue = { ...this.users[index], name: 'Mary' };
Vue.set(this.users, index, newValue);
Or, you can simply use manipulate array using splice method which is internally over-riden by Vue.js:
const index = 0;
const newValue = { ...this.users[index], name: 'Mary' };
// Using array manipulation
this.users.splice(index, 1, newValue);
Or, you can use immutable data practice as:
const newArray = [...this.users];
const newValue = { ...this.users[0], name: 'Mary' };
newArray[0] = newValue;
this.users = newArray;
studentsin your question (code) and second, there is no watcher ...(at least in your question)