Javascript 未更新Vue组件道具

在我的数据中有一个对象

程序

。我异步加载对象列表并将其添加到

程序.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(); }) 
    },

我的UI如下所示：

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

因此，我将我的

程序

对象向下传递到我的Sections组件

在我的控制台日志中，我可以看到字段

program.sections

确实是我的对象数组，但我的UI没有改变。当我将来自Sections组件的UI代码直接放入我的页面时，它会得到更新，数据会正确显示，但当我使用该组件时，道具不会正确更新

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

---

有什么想法吗？

在此程序中指定一个新的对象引用。：

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（）节中初始化

程序。
在此
中分配一个新的对象引用。程序
：

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（）部分初始化
程序。
主要问题是Vue在某些情况下无法检测到更改

e、 g.将项设置为数组或将附加属性设置为对象

这是问题的症结所在。你可能需要
 主要问题是Vue在某些情况下无法检测到更改

e、 g.将项设置为数组或将附加属性设置为对象

这是问题的症结所在。你可能需要
 这可能会修复它
This.$set（This.program，'sections'，This.progrmm.sections）
但您拼写的
This.progrmm
不正确。我只想在你的数据中实例化它：
program:{sections:{}
@ohgodhy谢谢你的帮助，但这两种方法似乎都不起作用。这可能会修复它
this.$set（this.program，'sections'，this.progrmm.sections）
但是你拼写的
this.progrmm
不正确。我只是在您的数据中实例化它：
程序：{sections:{}
@ohgoddy谢谢您的帮助，但这两种方法似乎都不适合我