通过单击v-for

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

以防万一，这里是所得console.log数组的events：

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属性动态添加到事件中，但是VueJ不会触发此更改。您可以像这样设置属性，以确保VueJ重新呈现事件：

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

请参见使用此方法的JsFiddle：https://jsfiddle.net/84zhx1et/1/