web-dev-qa-db-ja.com

複数のネストされたオブジェクトを持つオブジェクトでVue.setを使用する

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)
_

誰が私が間違っているのか手掛かりがありますか？

javascriptvue.jsecmascript-6vuejs2
14
Marine Le Borgne

非反応部分は、fieldsオブジェクトに追加しようとする新しいプロパティのみです。

googleInfosプロパティを追加するには、次のようにミューテーションに設定する必要があります。

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