I am having trouble figuring out how to apply a class to a button and then change it to another class after it is clicked. The idea is to have multiple buttons that serve as filters, allowing the user to select only one at a time with the selected button being highlighted. I can get the highlighting part to work, but I'm struggling with removing the initial class to change the text color using v-bind.
Here is a link to the JSFiddle without the "notactive" class added, as I am still trying to find the best solution.
new Vue({
el: '#vue',
data: {
selected: ''
}
}).highlight {
color: green;
font-size: 16px;
border: 0;
background: 0;
}
.notactive {
color: grey;
border: 0;
background: 0;
font-size: 14px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="vue">
<button @click="selected = 1" :class="{highlight:selected == 1}">Button1</button>
<button @click="selected = 2" :class="{highlight:selected == 2}">Button2</button>
<button @click="selected = 3" :class="{highlight:selected == 3}">Button3</button>
</div>