在具有多个嵌套对象的对象中使用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()以避免出现change detection caveat。

我的问题是我找不到合适的方法来添加它。

下面是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);
}