When the element in vue v-for is clicked, add class to this element and click to cancel the class.

clipboard.png

when you click. Add class to the div and then remove the clicks from the class peer. Clicks do not affect each other

Mar.07,2021

v-foritemclass
changeClass{
    item.class = !item.class
}
<div :class="{item.class? 'activeClass':''}"></div>

  • html is as follows
  <div class="Ohidden m-login-checkbox"   @click="toggleClass($event)">
            <p v-bind:class="{'f-btnActive':isActive}">

</div>
  • js is as follows
<script type="text/ecmascript-6">
  export default {
    name: 'app',
    data(){
    return{
      isActive:false,
    }
    },
    methods:{
      //""
      toggleClass(event){
       this.isActive=!this.isActive;
       }
     }

e.target.classList.add('className')
//e.target.classList.remove('className')
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e40a50-448c0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e40a50-448c0.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?