Vue.js toggle class on click

Question

Jak przełączyć klasę w vue.js?

mam następujące:

 <th class="initial " v-on="click: myFilter"> 
      <span class="wkday">M</span> 
     </th> 


     new Vue({ 
      el: '#my-container', 

      data: {}, 

      methods: { 
      myFilter: function(){ 

       // some code to filter users 
      } 
      } 
     }) 

Kiedy klikam th Chcę zastosować active jako klasa następująco:

 <th class="initial active" v-on="click: myFilter"> 
      <span class="wkday">M</span> 
     </th> 

potrzebuje to do przełączania czyli za każdym razem jego kliknięty to musi dodaj/usuń klasę.

Jak to zrobić w vue.js?

Answer 1

można mieć aktywny klasa zależeć wartość logiczną danych:

<th 
    class="initial " 
    v-on="click: myFilter" 
    v-class="active: isActive" 
> 
    <span class="wkday">M</span> 
</th> 



    new Vue({ 
     el: '#my-container', 

     data: { 
      isActive: false 
     }, 

     methods: { 
     myFilter: function(){ 
      this.isActive = !this.isActive; 
      // some code to filter users 
     } 
     } 
    }) 

Answer 2

Ta odpowiedź właściwego dla Vue.js version 2

<th 
    class="initial " 
    v-on:click="myFilter" 
    v-bind:class="{ active: isActive }" 
> 
    <span class="wkday">M</span> 
</th> 

Reszta Odpowiedz przez Douglas jest nadal stosowane (konfigurowania nowa instancja Vue z isActive: false itd.).

Istotne docs: https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax i https://vuejs.org/v2/guide/events.html#Method-Event-Handlers

Answer 3

Oprócz odpowiedzi NateW, o ile masz myślniki w css nazwy klasy, należy owinąć tej klasy wewnątrz (single) cytuje:

<th 
    class="initial " 
    v-on:click="myFilter" 
    v-bind:class="{ 'is-active' : isActive}" 
> 

<span class="wkday">M</span> 
</th> 

Zobacz this temat więcej na ten temat.

Answer 4

bez konieczności stosowania metody:

// html element 
<div id="mobile-toggle" 
v-bind:class="{ active: showMobileMenu }" 
v-on:click="showMobileMenu = !showMobileMenu"> 
</div> 

//in your vue.js app 
data: { 
    showMobileMenu: false 
}