Question

我有一个这样的模板：

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

来自我的＆＃34;控制器＆＃34; ：

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

}）;

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

谢谢。

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

Answer 2

请注意，如果类名包含连字符“-”，则vue无法编译模板。我尝试过使用这个名称为“ main-container”的类来解决这个问题。

Vue js在循环内切换类

2 个答案: