Important Note: Implemented Vue.js and Vuetify.js for both functionality and styling.
Utilizing the :class and @click properties, I managed to alter the background color of a button to a specified color. However, this modification is being applied to all buttons, rather than just the one that was clicked on.
Query: How can I toggle a button individually without toggling all buttons at once?
Here is a snippet from 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 the same vue file:
<script>
export default {
data: function() {
return {
companies,
msg: "indiv",
dashboards: ['profile', 'charts'],
isToggled: false
}
},
methods: {
}
}
</script>
I have reviewed a similar question and received a Vue warning stating that the isToggled method is already defined as a data property. Toggle Class for an item Vue.js
Additionally, I have consulted the vue.js documentation regarding data binding, but still require assistance with this issue. https://v2.vuejs.org/v2/guide/class-and-style.html
Although the Vuetify framework offers toggled button components, the client prefers a unique style and thus those components cannot be utilized. https://vuetifyjs.com/components/buttons