I'm currently experimenting with Vue.set() to update a state object in Vue 2.
This is the structure of the object:
state: {
entries: [
// entry 1
fields: {
someProperties : ''
// I want to add another property called 'googleInfos'
}
], [
// entry 2
fields: {
someProperties : ''
// I want to add another property called 'googleInfos'
}
]
}
Previously, I used this mutation to update it. Each entry is updated individually due to varying content:
ADD_GOOGLE_INFOS (state, {index, infos}) {
state.entries[index].fields.googleInfos = infos
}
Now, I am attempting to implement Vue.set() to prevent change detection issues.
The syntax for Vue.set() is as follows:
Vue.set(state.object, key, value)
I tried using this approach, but it doesn't seem to be effective as state.entries[index] is not a top-level object:
Vue.set(state.entries[index], 'fields.googleInfos', infos)
Another attempt that failed was:
Vue.set(state.entries, '[index].fields.googleInfos', infos)
Could anyone provide insight into what might be incorrect here?