So ändern Sie eine bestimmte (diese) der Klasse button wenn Sie auf klicken. Mit Vue.js 2.0
Beim anklicken eine der Schaltflächen Sie sind alle Windungen aktiv. Also, was ich will, ist nur die angeklickten geändert werden sollte.
JS:
var vm = new Vue({
el: '#toolBtns',
data: {
isActive: false
},
computed: {
activeClass: function () {
return {
active: this.isActive
};
}
}
});
HTML:
<div class="btn-group" role="group" id="toolBtns">
<button class="btn" type="button" @click="isActive = !isActive" :class="activeClass">Btn1</button>
<button class="btn" type="button" @click="isActive = !isActive" :class="activeClass">Btn2</button>
<button class="btn" type="button" @click="isActive = !isActive" :class="activeClass">Btn3</button></div>
Du musst angemeldet sein, um einen Kommentar abzugeben.
Werden Sie wahrscheinlich brauchen eine variable, um herauszufinden, welche Taste gerade ausgewählt ist. Und Sie können Sie verwenden, die Variablen dynamisch zu binden, richtig Klasse: mit :
:class="{active: activeBtn === 'btn1' }"
.Vorteil dieses Ansatzes ist, haben Sie nur eine variable anstelle von array zu speichern, die Taste ist derzeit ausgewählt, so dass Sie nicht haben, um die Iteration über das array jedesmal, wenn Sie eine Schaltfläche auswählen.
JS:
CSS:
HTML:
Finden Sie unter arbeiten fiddle hier.
Die Sie nicht benötigen, um 'isActive: false', und Sie brauchen nicht zu binden, isActive, um jedes der Elemente. Sie können gehen Sie wie folgt vor: 1 deklarieren Sie ein array namens 'Kandidaten', dann ist jedes Element geklickt haben, werden Sie geschoben-Kandidaten. 2 deklarieren Sie eine Funktion, genannt " enthält ()", die prüft, ob ein Element in der Kandidaten-array. 3, binden, enthält() für jedes Element. 4, CSS, gib 'geklickt' einige Stil.
html-code:
javascript-code:
CSS-code
hier ist das jsfiddle Beispiel https://jsfiddle.net/JoyAndBrave/anzdzq4L/6/
Richtung die Lösung oben ist korrekt, aber es ist sehr anfällig für Fehler, da es verwendet die Indizes direkt.
Wie bereits in der Antwort oben, dabei eine v-für würde im Grunde Ihr problem lösen.
Arbeiten fiddle: https://jsfiddle.net/z11fe07p/547/