How to make a specific element to have an active class using v-if and v-bind-CodePudding

This is the following code:

<div >
                <div  @click="filterImages(1)">
                    <div ></div>
                    <div >
                        <h5>{{webData.filters[0]}}</h5>
                    </div>
                </div>
                <div  @click="filterImages(2)">
                    <div ></div>
                    <div >
                        <h5>{{webData.filters[1]}}</h5>
                    </div>
                </div>
                <div  @click="filterImages(3)">
                    <div ></div>
                    <div >
                        <h5>{{webData.filters[2]}}</h5>
                    </div>
                </div>
                <div  @click="filterImages(4)">
                    <div ></div>
                    <div >
                        <h5>{{webData.filters[3]}}</h5>
                    </div>
                </div>
                <div  @click="filterImages(5)">
                    <div ></div>
                    <div >
                        <h5>{{webData.filters[4]}}</h5>
                    </div>
                </div>
                <div  @click="filterImages(6)">
                    <div ></div>
                    <div >
                        <h5 >{{webData.filters[5]}}</h5>
                    </div>
                </div>
                <div  @click="filterImages(7)">
                    <div ></div>
                    <div >
                        <h5>{{webData.filters[6]}}</h5>
                    </div>
                </div>
            </div>

Here is the class:

.filter-item .filter-item-overlay.active {
    background-color: rgba(0, 0, 0, .7291);
}

So I want to make single selected element to set as active by click. So when the user clicks on specific filter it remains active. Is there some alternative with using v-bind and v-if?

CodePudding user response：

As suggested you above, you should take a look at the vue doc : https://vuejs.org/v2/guide/class-and-style.html

But this might help you :

<template>


<div
    v-for="i in 7"
    :key="'img_'   i"
     
    @click="filterImages(i)"
  >
    <div ></div>
    <div 
      
      :
    >
      <h5>{{webData.filters[i]}}</h5>
    </div>
  </div>
</template>

<script>
export default {
  name: "Filter",
  data() {
    return {
      filteredImage: -1,
    }
  },
  methods: {
    filterImages(index) {
      this.filteredImage = index;
    }
  }
}
</script>

CodePudding user response：

Here is a simplified version of your code using style binding:

var app = new Vue({
  el: '#app',
  data: {
    activeIndex: 0
  }
})

.active {
  color: red;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">
  <ul>
    <li @click="activeIndex=1" :>One</li>
    <li @click="activeIndex=2" :>Two</li>
    <li @click="activeIndex=3" :>Three</li>
  </ul>
</div>