Vue.js 循环内的Vue js切换类

我有这样一个模板：

<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>

}))

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

---

谢谢。

您需要在每个项目上设置活动标志，以便能够单独跟踪它们

例如：

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

然后，您将能够绑定该类并单击event to 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>

{{item.name}-${{item.price}

请注意，如果类名包含破折号“-”，则vue无法复制模板。

---

我尝试使用名为“main container”的类，但遇到了这个问题。

这个问题的某些版本经常出现在这里。这是一个答案。是另一个。可能是

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