javascript - Using Vue.set in object with multiple nested objects - Stack Overflow

admin管理员组

文章数量:1186262

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 ?

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 ?

• javascript
• vue.js
• ecmascript-6
• vuejs2

Share Improve this question Follow edited Jul 14, 2022 at 1:21 tony19 138k2323 gold badges276276 silver badges346346 bronze badges asked May 2, 2018 at 11:44 Marine Le BorgneMarine Le Borgne 1,05622 gold badges1111 silver badges3939 bronze badges 7

• 1 Please try this in your mutation : Vue.set(state.entries[index].fields, 'googleInfos', infos) – 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 Commented May 2, 2018 at 11:52
• Your state object got me confused, Are you using vuex? – Patrick Cyiza Commented May 2, 2018 at 11:52
• Done, glad to help ! – Thomas Ferro Commented May 2, 2018 at 11:53
• @PatrickCyiza Yes I am using Vuex, why? – Marine Le Borgne Commented May 2, 2018 at 12:48

 |  Show 2 more comments

1 Answer 1

Sorted by: Reset to default 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);
}

本文标签： javascriptUsing Vueset in object with multiple nested objectsStack Overflow