Comment changer une classe de boutons spécifique (this) en cliquant sur. Utilisation de Vue.js 2.0

Lorsque vous cliquez sur l'un des boutons, ils sont tous activés. Donc, ce que je veux, c'est juste le cliqué, il faut changer.Comment changer une classe de boutons spécifique (this) en cliquant sur. Utilisation de Vue.js 2.0

var vm = new Vue({ 
 
\t el: '#toolBtns', 
 
\t data: { 
 
\t \t isActive: false 
 
\t }, 
 
\t computed: { 
 
\t \t activeClass: function() { 
 
\t \t \t return { 
 
\t \t \t \t active: this.isActive 
 
\t \t \t }; 
 
\t \t } 
 
\t } 
 
});

<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>

Source

2017-02-06 radeveloper

Vous avez probablement besoin d'une variable pour trouver le bouton actuellement sélectionné. Et vous pouvez utiliser cette variable pour lier dynamiquement la classe correcte: avec: :class="{active: activeBtn === 'btn1' }". L'avantage de cette approche est que vous n'avez qu'une seule variable au lieu de tableau pour enregistrer le bouton actuellement sélectionné, donc vous n'avez pas besoin d'itérer sur le tableau chaque fois que vous sélectionnez un bouton.

var vm = new Vue({ 
 
\t el: '#toolBtns', 
 
\t data: { 
 
    \t \t activeBtn:'' 
 
\t } 
 
});

.active{ 
 
    background-color:red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script> 
 
<div id="toolBtns"> 
 
<div class="btn-group" role="group" id="toolBtns"> 
 
    <button class="btn" type="button" @click="activeBtn = 'btn1'" :class="{active: activeBtn === 'btn1' }">Btn1</button> 
 
    <button class="btn" type="button" @click="activeBtn = 'btn2'" :class="{active: activeBtn === 'btn2' }">Btn2</button> 
 
    <button class="btn" type="button" @click="activeBtn = 'btn3'" :class="{active: activeBtn === 'btn3' }">Btn3</button></div> 
 
</div>

Voir violon here travail.

Source

2017-02-06 07:39:35 Saurabh

Merci Saurabh, Je ferai des recherches sur la méthode que vous avez suggérée et j'essaierai de partager le résultat ici. La situation ci-dessus est toujours problématique. Donc ça n'a pas marché. – radeveloper

Voir le commentaire ci-dessous avec un violon de travail :) –

@radeveloper Voir ce violon avec un minimum de code: https://jsfiddle.net/9y02qo6a/ – Saurabh

La direction de la solution ci-dessus est correcte mais elle est très vulnérable aux erreurs car elle utilise directement les index. Comme suggéré dans la réponse ci-dessus, faire un v-for résoudrait fondamentalement votre problème.

var vm = new Vue({ 
el: '#toolBtns', 
data: { 
    buttons:[{name:'Btn1',active:false},{name:'Btn2',active:false}, 
      {name:'Btn3',active:false}] 
}, 
methods: { 
    toggleActiveClass:function(index){ 
    this.buttons[index].active=!this.buttons[index].active; 
    } 
    } 
}); 


<div class="btn-group" role="group" id="toolBtns"> 
    <button v-for="(btn, index) in buttons" type="button" 
       @click="toggleActiveClass(index)" 
       :class="{active: btn.active}">{{btn.name}} 
    </button> 
</div>

violon travail: https://jsfiddle.net/z11fe07p/547/

Source

2017-02-06 08:08:10

Merci Cristi Jora :) La solution est réussie. Mais un seul bouton devait être actif à chaque clic. – radeveloper

Oh n'a pas lu à ce sujet. Puis sur toggleActiveClass vous avez juste à désactiver tous les autres boutons :) Fiddle ici: https://jsfiddle.net/z11fe07p/549/ –

Merci. La solution est exactement ce que je veux – radeveloper

Vous n'avez pas besoin de mettre « isActive: false », et vous n'avez pas besoin de lier isActive à chacun des éléments. vous pouvez faire comme suit: 1, déclarer un tableau, appelé 'candidats', puis chaque élément cliqué sera poussé dans les candidats. 2, déclarez une fonction appelée 'contains()' qui vérifie si un élément se trouve dans le tableau des candidats. 3, lie contains() à chaque élément. 4, en CSS, donne un style «cliqué».

code html:

<body> 
    <div id="toolBtns"> 
     <button v-for="item in buttons" v-on:click="provide(item)" v-bind:class="{clicked: contains(candidates, item)}" type="button">{{ item.name }} 
     </button> 
    </div> 
</body>

code javascript:

var toolBtns = new Vue({ 
el: '#toolBtns', 
data: 
{ 
    buttons: [ 
     {name: 'Btn1'}, 
     {name: 'Btn2'}, 
     {name: 'Btn3'}, 
    ], 
    candidates: [], 
}, 
methods: 
{ 
    provide: function(item) 
    { 
     if(this.candidates.indexOf(item) == -1) 
     { 
      this.candidates.push(item); 
     } 
     else 
     { 
      this.candidates.splice(this.candidates.indexOf(item), 1); 
     } 
    }, 
    contains: function(arr, item) 
    { 
     return arr.indexOf(item) != -1; 
    }, 
} 
});

code CSS

.clicked{ 
    background-color: red; 
}

ici est l'exemple jsFiddle https://jsfiddle.net/JoyAndBrave/anzdzq4L/6/

Source

2017-11-17 10:03:55

Comment changer une classe de boutons spécifique (this) en cliquant sur. Utilisation de Vue.js 2.0

Répondre

Questions connexes