Vue V-для не обновления, даже с установленным

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

РЕДАКТИРОВАТЬ этот код использует компонент класса машинопись

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

В качестве примечания: если вы планируете динамически изменять список (добавлять / удалять теги), использование индекса в качестве ключа не рекомендуется и может привести к неожиданному поведению. Лучше использовать идентификатор или имя тега, если он уникален.