时间戳

首页 > 解决方案 > Vuejs 使用 v-for 添加和删除类

javascript - Vuejs 使用 v-for 添加和删除类

问题描述

我正在使用 vuejs v-for 循环制作项目列表。我有一些来自服务器的 API 数据。

items: [
   {
       foo: 'something',
       number: 60
   },
   {
       foo: 'anything',
       number: 15
   },
   {
       foo: 'text',
       number: 20,
   }
]

模板

<div v-for="(item,index) in items" :key="index">
     <div :class="{ active: ????}" @click="toggleActive">
          {{ item.foo }} 
          {{ item.number }}
     </div>
</div>

JS

methods: {
    toggleActive() {
        //
    }
}

我需要以下内容：当我单击 div 添加活动类时，如果我已经有活动类 - 删除活动类。（切换）。我也可以选择多个项目。

我怎样才能做到这一点？我在 items 数组中没有布尔变量，我不应该在单独的组件中移动 item

标签： javascriptvue.jsv-for

解决方案

干得好。

new Vue({
  el: "#app",
  data: {
    items: [{
        foo: 'something',
        number: 60
      },
      {
        foo: 'anything',
        number: 15
      },
      {
        foo: 'text',
        number: 20,
      }
    ]
  },
  methods: {
    toggleActive(index) {
      let item = this.items[index];

      item.active = !item.active;

      this.$set(this.items, index, item);

    }
  }
})
.active {
  color: red;
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
  <div v-for="(item,index) in items" :key="index">
    <div :class="{ active: item.active}" @click="toggleActive(index)">
      {{ item.foo }} {{ item.number }}
    </div>
  </div>
</div>

这是一个 JS 小提琴： https ://jsfiddle.net/eywraw8t/250008/

推荐阅读