javascript – 在具有多个嵌套对象的对象中使用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()以避免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)

任何人都知道我做错了什么?

最佳答案
唯一的非反应部分是您尝试在fields对象中添加的新属性.

要添加googleInfos属性,您必须将其设置为如下突变:

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

转载注明原文:javascript – 在具有多个嵌套对象的对象中使用Vue.set - 代码日志