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

Question

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

调用addTag("thing")时，"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打字稿class模板）

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)
    }
}

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

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

Vue v-for not updating, even with set

typescript

vue.js

v-for

vue-class-components