Как добавить CSS-класс для кликаемого изображения в Vue.js

Question

У меня есть тег div со списком изображений, и мне нужно добавить класс CSS к нажатому изображению .Я попытался использовать приведенный ниже код.

<div v-for="kudo in catkudo" style="width:20%;float:left;display:block;height:80px;"
     onMouseOver="this.style.border='1px solid #0F0'" onMouseOut="this.style.border='1px solid transparent'">
    <div @click="e => e.target.classList.toggle('active')">
        <img style="width:40%" v-bind:value="kudo.id" @click="select(kudo.id)" v-model="kudocat"
             :src="'/kudosuploads/badges/'+kudo.image" alt="">
        <p>{{ kudo.catname }}</p>
    </div>
</div>

@click="e => e.target.classList.toggle('active')"

<style>
    #kudos .active, #kudos img.active ~ p {
        color: red;
    }
</style>

Он добавляет класс CSS для каждого изображения, которое мы нажимаем.Что мне нужно, так это добавить класс CSS только к изображению, по которому щелкаютчтобы удалить изображение, выбранное пользователем, два необходимо удалить класс CSS add из изображения one добавить к изображению two.

Answer 1

Вам нужно переключить это с помощью функции

<template>
    <div v-for="(kudo, index) in catkudo" class="class">
       <div>
          <img v-bind:class="{ active: isActive == index }" style="width:40%"  v-bind:value="kudo.id" v-model="kudocat" @click="changeSelected(index)" :src="'/kudosuploads/badges/'+kudo.image" alt=""  >
          <p >{{ kudo.catname }}</p>
       </div>
    </div>
</template>
<script>
export default{
    data() {
        isActive: ''
    },
   methods: {
       changeSelected(index) {
           this.isActive = (index == this.isActive ? '' : index);
       }
   }
}
</script>

<style>
   .class {
       width:20%;
       float:left;
       display:block;
       height:80px;
   }
   .class:hover {
       border: 1px solid #0F0;
   }
</style>