我正在try 使用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'

        }
    ]
}

到目前为止,我正在用这个Mutations 来更新它.我分别对每个条目进行变异,因为它们有不同的内容.

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)

所以我try 了这个,它似乎不起作用,因为state.entries[index]不是一等物品:

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

但这也不起作用:

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

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

推荐答案

唯一的非react 部分是您try 添加到fields对象中的新属性.

为了添加googleInfos属性,您必须将其设置为如下所示:

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

Vue.js相关问答推荐

设置Vite Vue 3需要多个应用程序输出目录

如何以惯用的方式触发 vue3 中同级组件的效果?

Vue 3:插槽属性 - 可以通过 props 传递数据吗?

组合 API | Vue 路由参数没有被监视

vue router/:param 斜杠的参数

查找未销毁的 Vue 组件

vue.js 在 App.vue 中获取路由名称

为什么在 Vue.js 中使用 `var` 关键字?

Vuejs中的条件a href

如何修复跨域读取阻塞 (CORB) 阻止了 MIME 类型应用程序/json 的跨域响应问题?

axios.patch / axios.put 在 Vue 和 Laravel 中不起作用

使用 vue-test-utils 配置过滤器

Vue路由保持活动和挂载行为

基于条件的VueJS HTML元素类型

如何使用 JavaScript 按索引删除数组元素?

'vue' 未被识别为内部或外部命令

异步api调用后如何使用vuex getter

Vue Router beforeRouteLeave 不会停止子组件

如何在我的 vue js 中实现无限滚动

返回 VueJS 方法的Native Code消息