[Vuejs]-How to binding only single class when using several v-on:click?

by

1👍

✅

Try adding a method to the @click – then you can build up a more complex logic, than simple “toggle”.

new Vue({
  el: "#app",
  data: {
    bindA: true,
    bindB: false
  },
  methods: {
    bind(btn) {
      if ((btn === 'A' && !this.bindA) || (btn === 'B' && !this.bindB)) {
        this.bindA = !this.bindA
        this.bindB = !this.bindB
      }
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="bind('A')">A</button>
  <button @click="bind('B')">B</button>

  <span :class="{ classA:bindA, classB:bindB }"></span>
</div>
👤muka.gergely

2👍

It’s very simple in vue as well.
Bind the class according to the conditions you want to see the data

  :class="{'classA': (bindA== true), 'classB':(bindA== false)}"
👤Tony Tom

Leave a comment