通过单击 v-for 切换类个单独的 li 元素

Question

在尝试将实施到我的应用程序中失败一个多小时后，我决定在这里寻求帮助。我的 li 项目的 class 不会切换，我不明白为什么。这是我的代码：

HTML:

<li :class="classObject(event)" v-for="event in events" @click="showEvent(event)">
  ...
</li>

JS:

methods: {
  classObject(event) {
    return {
      active: event.active,
      'event': true
    };
  },
  showEvent: function(event) {
    event.active = !event.active;
  }
},
mounted() {
  axios.get(this.eventsJsonUrl)
    .then(response => {
      this.events = response.data;
      this.events.map((obj) => {
        obj.active = false;
        return obj;
      })
    })
}

请注意，我的 events 对象数组最初没有活动的属性，我将其添加到 mounted 挂钩中。

以防万一这里有一个 console.log 结果 events 数组：

Answer 1

使 class 依赖于这样的变量：

<li class="event" :class="{ active: event.active }" v-for="event in events" @click="showEvent(event)">
  ...
</li>

函数 showEvent 像您已有的那样切换 event.active 变量。

编辑：查看此 jsfiddle 以了解其是否有效：https://jsfiddle.net/84zhx1et/

编辑 2：我现在明白你的例子出了什么问题：你正试图动态地将活动属性添加到事件中，但 VueJs 不会触发此更改。您可以像这样设置属性以确保 VueJs 重新呈现事件：

  this.events.map((obj) => {
    this.$set(obj, 'active', false)
  })

查看使用此方法的 JsFiddle：https://jsfiddle.net/84zhx1et/1/

通过单击 v-for 切换类个单独的 li 元素

Toggling classes of individual li elements by click in a v-for

vue.js

vue-cli-3

通过单击 v-for 切换 类 个单独的 li 元素

Toggling classes of individual li elements by click in a v-for

vue.js

vue-cli-3

通过单击 v-for 切换类个单独的 li 元素