VueJS ajout / suppression de classe sur cliquez sur
J'ai un "menu" avec les couleurs, et lorsque l'utilisateur clique sur l'un des div à l', il faut ajouter une classe active, et de supprimer toutes les autres classes des autres div... Comment dois-je faire cela en 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>
Je sais que je l'ai dans mon selectColor() fonction pourrait faire quelque chose comme:
event.target.parentNode.classList.remove("active");
event.target.className = "active";
Cependant, juste pensé qu'il y avait une meilleure façon en VUE de manipuler le DOM directement ce cela?
- Vous pouvez utiliser :classe de vue de la directive. Peut-être vous avez besoin de refactorisation de code. Afficher les divs par v-pour de la matrice : [{classe: "clair|foncé, actives: vrai|faux: contexte: nombre}]
Vous devez vous connecter pour publier un commentaire.
Vous pouvez essayer quelque chose comme cela et de changer de couleur de chaînes pour les objets pour obtenir de la lumière et de l'obscurité de la classe en y
JS:
CSS:
HTML: