循环内的Vue js切换类答案

【问题标题】：Vue js toggle class inside a loop循环内的Vue js切换类
【发布时间】：2017-11-13 19:10:35
【问题描述】：

我有一个这样的模板：

<div id="vue-instance">
  <ul>
    <li v-for="item in inventory" v-on:click="say()" v-bind:class="{active:isActive}" > {{ item.name }} - ${{ item.price }}
    </li>
  </ul>
</div>

还有来自我的“控制器”：

var vm = new Vue({
 el: '#vue-instance',
  data: {
    inventory: [
      {name: 'MacBook Air', price: 1000},
      {name: 'MacBook Pro', price: 1800},
      {name: 'Lenovo W530', price: 1400},
      {name: 'Acer Aspire One', price: 300}
   ],
    isActive : false
 },
  methods: {
    say: function () {
      this.isActive = !this.isActive 
    }
 }

});

当我从列表中单击一个项目时，所有项目都会影响到活动类。我的问题是如何切换单个元素？

谢谢。

【问题讨论】：

这里经常出现这个问题的某些版本。 Here 是一个答案。 Here 是另一个。
Selecting specific element in vue 2 inside v-for loop的可能重复

标签： vue.js

【解决方案1】：

您需要在每个项目上都有一个活动标志才能单独跟踪它们。

例如：

{name: 'MacBook Air', price: 1000, isActive: false},
{name: 'MacBook Pro', price: 1800, isActive: true}

然后，您将能够通过执行以下操作将类和单击事件绑定到 item.isActive：

<li v-for="item in inventory" v-on:click="item.isActive = !item.isActive" v-bind:class="{active:item.isActive}" > {{ item.name }} - ${{ item.price }}
</li>

【讨论】：

【解决方案2】：

请注意，如果类名包含破折号“-”，则 vue 无法编译模板。我尝试使用这个名称为“main-container”的类并遇到了这个问题。

【讨论】：