vue.js - 当 v-for 渲染的对象发生变化时如何更新 DOM？

Question

我正在使用 v-for 来呈现基于对象数组的列表。

<ul>
  <li v-for="category, i in categories"
  :class="{active: category.active}"
  @click="changeCategory(i)">
    <a>{{ category.service_type_name }}</a>
  </li>
</ul>

当您单击列表项时 changeCategory(index) 运行:

changeCategory(index) {
    this.categories.forEach((c, i) => {
        c.active = (i != index)? false : true
    })
}

所以点击的列表项 active 属性被设置为 true 并且所有其他设置为 false ，列表项得到一个添加了 .active 类(因为模板中的 :class="{active: category.active}" 行。

但是，DOM 不会更新以显示此更改。

是否可以在发生此更改时自动更新 DOM，而无需在 changeCategory(index) 函数中使用 this.$forceUpdate()？

编辑:将map更改为forEach，DOM仍然没有更新。

编辑:我正在使用 vue-class-components 和 typescript

import Vue from 'app/vueExt'
import { Component } from 'vue-property-decorator'
import * as Template from './services.vue'

@Component({
    mixins: [Template]
})
export default class Services extends Vue {
    categories = []

    created() {
        this.api.getServiceSetupCatagories().then((res) => {
            this.categories = res.categories
            this.categories.forEach((c, i) => {
                // adding active property to the object
                // active = true if i = 0, false otherwise
                c.active = (i)? false : true
            })
        })
    }

    changeCategory(index) {
        this.categories.forEach((c, i) => {
            c.active = (i != index)? false : true
        })
    }
}

Answer 1

在讨论了这个问题之后，我提出了以下替代方法。

将activeIndex 添加到data 并将模板更改为以下内容。

<ul>
  <li v-for="category, i in categories"
      :class="{active: activeIndex === i}"
      @click="activeIndex = i">
    <a>{{ category.service_type_name }}</a>
  </li>
</ul>

这似乎适用于@wrahim。

我相信原始代码的潜在问题是 active 属性被添加到 category 中，属于 Vue 的 change detection caveats 之一。 .