2

我有一个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 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)
    }
}

编辑此代码使用打字稿类组件

4

1 回答 1

2

只需要在初始化后给对象添加属性时使用$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 或标签名称。

于 2018-02-12T11:18:03.857 回答