Using Vue.set in object with multiple nested objects

Question

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 ?

Please try this in your mutation : Vue.set(state.entries[index].fields, 'googleInfos', infos) — Thomas Ferro
– Thomas Ferro, Commented May 2, 2018 at 11:47
It works ! I don't know why I thought it needed to be only the name of the property and not it's children. Do you want to put that as an answer so I can accept it ? — Marine Le Borgne
– Marine Le Borgne, Commented May 2, 2018 at 11:52

Thomas Ferro · Accepted Answer · 2018-05-02 11:52:34Z

28

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);
}

answered May 2, 2018 at 11:52

Thomas Ferro

2,45221 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Uygar Over a year ago

Be sure that Vue is imported, otherwise you may not even get an error

Herz3h Over a year ago

@Uygar, its safer to use this.$set instead of Vue.set and avoid the issue altogether.

Collectives™ on Stack Overflow

Using Vue.set in object with multiple nested objects

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related