Vue.js toggle class on click

Vue.js toggle class on click

Asked on November 22, 2018 in vue.js.
Add Comment


  • 2 Answer(s)

    You can have live class to be reliant on Boolean data.

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

     

    Answered on November 22, 2018.
    Add Comment

    No need of function:

    // 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
    }
    
    Answered on November 22, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.