5

我正在使用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，而不this.$forceUpdate()在changeCategory(index)函数中使用？

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

编辑：我正在使用带有打字稿的 vue-class-components

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

2 回答 2

2

在讨论了这个问题后，我建议了以下替代方法。

添加模板并将其更改为以下内容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 的变更检测警告之一中。

于 2017-05-01T18:15:21.470 回答
0

这按预期工作。您的问题不在您在此处发布的代码中。（即使使用 map：在 map 中，对象也是引用，因此修改它们的成员会修改原始对象。）

new Vue({
  el: '#app',
  data: {
    categories: [{
        service_type_name: 'one',
        active: false
      },
      {
        service_type_name: 'two',
        active: false
      }
    ]
  },
  methods: {
    changeCategory(index) {
      this.categories.map((c, i) => {
        c.active = (i != index) ? false : true
      })
    }
  }
});
.active {
  background-color: lightgray;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.min.js"></script>
<ul id="app">
  <li v-for="category, i in categories" :class="{active: category.active}" @click="changeCategory(i)">
    <a>{{ category.service_type_name }}</a>
  </li>
</ul>

于 2017-05-01T16:13:49.390 回答