VueJS hinzufügen entfernen Klasse bei Klick

Question

Ich habe ein "Menü" mit Farben, und wenn der Benutzer auf eines der divs klicken, sollte es eine aktive Klasse hinzufügen, und entfernen Sie alle anderen aktiven Klassen von den anderen div ... Wie Ich mache das in VUE?

<div class="choose-color__primary" style="width:400px"> 
          <div class="light" v-on:click="selectColor($event)" :style="{'background-color': LightenDarkenColor(colors.primaryColor, 30)}"></div> 
          <div class="light" v-on:click="selectColor($event)" :style="{'background-color': LightenDarkenColor(colors.primaryColor, 15)}"></div> 
          <div class="light" v-on:click="selectColor($event)" :style="{'background-color': LightenDarkenColor(colors.primaryColor, 0)}"></div> <!-- This is the color the user has chosen from color wheel --> 
          <div class="dark" v-on:click="selectColor($event)" :style="{'background-color': LightenDarkenColor(colors.primaryColor, -15)}"></div> 
          <div class="dark" v-on:click="selectColor($event)" :style="{'background-color': LightenDarkenColor(colors.primaryColor, -30)}"></div> 
         </div> 

Ich weiß, dass ich in meinem select() Funktion wie etwas tun könnte:

das DOM direkt das diese

event.target.parentNode.classList.remove("active"); 
      event.target.className = "active"; 

jedoch nur dachte, dass es in VUE einen besseren Weg als zu manipulieren?

Answer 1

Sie könnten so etwas wie dies versuchen und tauschen dort die Farb Strings für Objekte auch die hellen und dunklen Klasse zu erhalten

new Vue({ 
 
    el: '#chooser', 
 
    data:() => ({ 
 
    // generate the array as you want 
 
    colors: [ 
 
     'green', '#000', '#123' 
 
    ], 
 
    activeColor: '' 
 
    }) 
 
})

.colors > div { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
.active { 
 
    border: 2px solid red; 
 
}

<div id="chooser"> 
 
    <div class="choose-color__primary colors" style="width:400px"> 
 
     <div 
 
     v-for="color in colors" 
 
     @click="activeColor = color" 
 
     :style="{'background-color': color}" 
 
     :class="{active: color === activeColor}" 
 
     ></div> 
 
    </div> 
 
</div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>