Использование Vue.set в объекте с несколькими вложенными объектами

Question

Я пытаюсь использовать Vue.set() для обновления объекта состояния в Vue 2.

Вот как выглядит объект:

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'

        }
    ]
}

Пока что я обновлял его с помощью этой мутации. Я мутирую каждую запись отдельно, потому что они имеют разное содержание.

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

Теперь я пытаюсь реализовать Vue.set(), чтобы избежать предупреждения об обнаружении изменений .

Моя проблема в том, что я не могу найти правильный способ добавить его.

Вот как Vue.set () должен работать:

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

Итак, я попробовал это, что, похоже, не работает, потому что state.entries[index] не является объектом первого ранга:

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

Но это тоже не работает:

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

Кто-нибудь знает, что я делаю не так?

Answer 1

Единственная нереактивная часть - это новое свойство, которое вы пытаетесь добавить в объект fields.

Чтобы добавить свойство googleInfos, необходимо установить его в мутации следующим образом:

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