Vue v-for 不更新，即使有设置

Question

我有一个呈现数组初始状态的v-for 列表。但是当我将项目添加到数组时，渲染不会更新。 文档和此处的大多数答案都提到您必须使用 this.$set 而不是 array.push()，但在我的情况下这没有帮助。

当调用addTag("thing") 时，“事物”被添加到数组中并且它在 Vue 检查器中可见。只是v-for 没有更新。

模板

<span v-for="(tag, index) in project.tags" :key="index">
      {{tag}}    // this renders all the tags that are initially available
</span>

代码（vue typescript类模板）

export default class Student extends Vue {
    project:Project = {} as Project
    newtag : string = ""

    addTag() {
        // adds to array, but v-for not updating
        this.$set(this.project.tags, this.project.tags.length, this.newtag)

        // adds to array, but v-for not updating
        this.project.tags.push(this.newtag)
    }
}

编辑此代码使用typescript class component

Answer 1

只需要在初始化后给对象添加属性时使用$set，这里不用使用，只需用空标签数组初始化对象即可。

将您的代码更改为如下所示：

export default class Student extends Vue {
   //I'm not a TS expert, so I'm not sure this is the correct way to init
   // a tags array, but you get the point
    project:Project = {tags:[]} as Project
    newtag : string = ""

    addTag() {   
        // adds to array, but v-for not updating
        this.project.tags.push(this.newtag)
    }
}

附带说明，如果您计划动态更改列表（添加/删除标签），则不建议使用索引作为键，否则可能会导致意外行为。最好使用唯一的 id 或标签名称。