在具有多个嵌套对象的对象中使用 Vue.set

Posted 2023-02-22

【中文标题】在具有多个嵌套对象的对象中使用 Vue.set

【英文标题】：Using Vue.set in object with multiple nested objects

【发布时间】：2018-10-12 12:27:42

【问题描述】：

我正在尝试使用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)

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

【问题讨论】：

请在你的突变中试试这个：Vue.set(state.entries[index].fields, 'googleInfos', infos)

有效！我不知道为什么我认为它只需要是财产的名称而不是孩子的名称。你想把它作为答案让我接受吗？

你的状态对象让我很困惑，你在使用 vuex 吗？

完成，很高兴为您提供帮助！

@PatrickCyiza 是的，我在使用 Vuex，为什么？

【参考方案1】：

唯一没有反应的部分是您尝试在fields 对象中添加的新属性。

为了添加 googleInfos 属性，您必须像这样在突变中设置它：

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

【讨论】：

一定要导入Vue，否则可能连报错都没有

@Uygar，使用this.$set 而不是Vue.set 更安全，完全避免了这个问题。