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

Question

我正在使用 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 数组中没有布尔变量，我不应该在单独的组件中移动项目

Answer 1

App.vue

<template>
     <div>
        <div 
        v-for="(item, i ) in items" 
        :key="i"
        :class="{ active: i === activeItem}"
        >
         // some looped items from data here
         // button for active toggle 
            <button @click="selectItem(i)"> make item active </button>
        </div>
    </div>
</template>
 

数据和方法

<script>
export default {
    data() {
        return {
            activeItem: null,
        };
    },
    methods: {
        selectItem(i) {
            this.activeItem = i;
        },
    },
};
</script>

Answer 2

给你。

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 Fiddle： https://jsfiddle.net/eywraw8t/250008/