How do you toggle a button with Vue.js?

Question

Note: Using Vue.js and Vuetify.js for functionality and styling.

With :class and @click properties, I was able to change the button's background color to desired color, but it applies the change to all of them, and not just the one that I clicked on.

Question: How do I have a button toggled without having all of them toggled at once?

In my vue file:

<v-layout>
  <v-flex md6>
    <v-text-field>Welcome.</v-text-field>
  </v-flex md6>
  <v-flex id="icon-filter">
    <span>Filter by:</span>
    <v-btn class="filter-button" :class="{toggled: isToggled}" @click="isToggled = !isToggled"><v-icon>local_offer</v-icon></v-btn>
    <v-btn class="filter-button" :class="{toggled: isToggled}" @click="isToggled = !isToggled"><v-icon>notifications</v-icon></v-btn>
  </v-flex>
</v-layout>

In the script section of same vue file:

<script>
  export default {
    data: function() {
      return {
        companies,
        msg: "indiv",
        dashboards: ['profile', 'charts'],
        isToggled: false
      }
    },
    methods: {

    }
  }
</script>

I've read through this question, but I get a Vue warning, mentioning that I have isToggled method as already defined data property. Toggle Class for an item Vue.js

I also read through vue.js docs on data binding, but still need help on this. https://vuejs.org/v2/guide/class-and-style.html

Vuetify framework has toggled buttons components, but client wants a distinct style, so cannot use this. https://vuetifyjs.com/components/buttons

Solution 1

Make another vue file (lets call it button.vue)...

button.vue

// template
<v-btn class="filter-button" :class="{toggled: isToggled}" @click="isToggled = !isToggled">
  <slot></slot>
</v-btn>

// script
export default {
  data: function () {
    return {
      isToggled: false
    }
  }
}

your_parent.vue

// script
import CustomButton from './button.vue'

export default {
  components: { CustomButton },
  data...
}

// template
<v-layout>
  <v-flex md6>
    <v-text-field>Welcome.</v-text-field>
  </v-flex md6>
  <v-flex id="icon-filter">
    <span>Filter by:</span>
    <custom-button><v-icon>local_offer</v-icon></custom-button>
    <custom-button><v-icon>notifications</v-icon></custom-button>
  </v-flex>
</v-layout>

Note: CustomButton and button.vue can be renamed to whatever is convenient for you

This would allow each custom-button to have its own data that can now be toggled!

Solution 2

I would use @click with a function and pass the $event to it, then use javascripts classList.toggle function to apply a css class or use .toggle()do whatever else you want.;

@click="myToggleFunction($event)"

Then

methods: {
   myToggleFunction: function(event){
        let button = event.target;
        button.classList.toggle('toggled');
   }
}