Question

我有一个v-for列表，用于呈现数组的初始状态。但是当我向数组添加项目时，渲染不会更新。文档中的大多数答案以及此处的SO提及您必须使用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 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或标签名称是唯一的，请更好地使用它。

即使使用set，Vue v-也不会更新

1 个答案: