Using Vue.set in object with multiple nested objects

I am trying to use Vue.set() to update a state object in Vue 2.

This is what the object looks like:

state: {
    entries: [
        // entry 1
        fields: {
            someProperties : ''
            // here I would like to add another property named 'googleInfos'
        }
    ], [
        // entry 2
        fields: {
            someProperties : ''
            // here I would like to add another property named 'googleInfos'

        }
    ]
}

So far, I was updating it with this mutation. I’m mutating each entry separately because they have different content.

ADD_GOOGLE_INFOS (state, {index, infos}) {
    state.entries[index].fields.googleInfos = infos
}

Now, I’m trying to implement Vue.set() to avoid a change detection caveat.

My problem is that I can’t find the proper way to add it.

Here’s how Vue.set() is supposed to work :

Vue.set(state.object, key, value)

So I tried this, which doesn’t seem to work because state.entries[index] is not an object of first rank :

Vue.set(state.entries[index], 'fields.googleInfos', infos)

But this doesn’t work either :

Vue.set(state.entries, '[index].fields.googleInfos', infos)

Any one has a clue what I’m doing wrong ?

Answer

The only non-reactive part is the new property you try to add in the fields object.

In order to add the googleInfos property, you have to set it in the mutation like this :

ADD_GOOGLE_INFOS (state, {index, infos}) {
    Vue.set(state.entries[index].fields, 'googleInfos', infos);
}