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

Question

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

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 挂钩中。

以防万一这是结果 events 数组的 console.log：

Answer 1

像这样使类依赖于变量：

<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：我现在看到您的示例中出了什么问题：您正在尝试将 active 属性动态添加到事件中，但 VueJs 不会触发此更改。您可以像这样设置属性以确保 VueJs 重新呈现事件：

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

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