在具有多个嵌套对象的对象中使用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)

有人知道我做错了什么吗？

- Marine Le Borgne

---

请在您的mutation中尝试以下代码：Vue.set(state.entries[index].fields, 'googleInfos', infos)。 - Thomas Ferro

它可以工作！我不知道为什么我认为它只需要属性的名称而不是它的子级。你想把它作为答案发表，这样我就可以接受它了吗？ - Marine Le Borgne

你的状态对象让我感到困惑，你在使用vuex吗？ - Patrick Cyiza

完成了，很高兴能帮忙！ - Thomas Ferro

@PatrickCyiza 是的，我正在使用Vuex，有何问题？ - Marine Le Borgne

Answer 1

唯一不具有响应性的部分是您尝试添加到fields对象中的新属性。

要添加googleInfos属性，您必须像这样在变异中设置它：

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

- Thomas Ferro

---

请确保已导入Vue，否则您可能甚至不会收到错误提示。 - Uygar

@Uygar，使用this.$set比使用Vue.set更安全，可以避免这个问题。请注意不要改变原意，保持通俗易懂。 - Herz3h