Question

在我的数据中，我有一个对象program。我异步加载对象列表并将其添加到program.sections。

    async loadSections() {
        if (this.user == null && this.program.sections) { return }
        await this.$store.dispatch('loadProgramSections', {program: this.program, user: this.user});
        console.log('loaded Sections', this.program);

        // this.$set(this.program, 'sections', this.progrmm.sections)
        // this.$nextTick(() => { this.$forceUpdate(); }) 
    },

我的用户界面如下：

<Section :program="program" ></Section>

所以我将program对象传递到我的Sections组件

在控制台日志中，我可以看到字段programm.sections确实是我的对象数组，但是我的UI并未更改。当我将我的Section部分中的UI代码直接放入页面中时，它会被更新并且数据会正确显示，但是当我使用该组件时，道具无法正确更新。

我已经在代码中尝试了注释行，但是不起作用。

有什么想法吗？

Answer 1

在this.program中分配新的对象引用：

async loadSections() {
    if (this.user == null && this.program.sections) { return }
    await this.$store.dispatch('loadProgramSections', {program: this.program, user: this.user});
    console.log('loaded Sections', this.program);

    // assign a new object reference
    this.program = Object.asssign({}, this.program);
},

还要确保在data（）部分初始化program。

Answer 2

主要问题是Vue在某些情况下无法检测到更改。

例如将项目设置为数组或将其他属性设置为对象

这就是问题的症结所在。您可能需要Caveats。

Vue组件道具未更新

2 个答案: