I am working on a functionality where I have three buttons. When one button is clicked, it should become active while the other two become inactive. However, in my current code, all three buttons are changing together on the click event. Is there a more elegant solution to this issue rather than creating separate values like isActive1, isActive2, and isActive3 for each button?
<div class="btn-group" role="group">
<button type="button" :class="getActiveClass()" v-on:click="getWeather('Misto Kyyiv'); isActiveBtn = !isActiveBtn">Kyiv</button>
<button type="button" :class="getActiveClass()" v-on:click="getWeather('London'); isActiveBtn = !isActiveBtn">London</button>
<button type="button" :class="getActiveClass()" v-on:click="getWeather('New York'); isActiveBtn = !isActiveBtn">New York</button>
</div>
data: function() {
return {
isActiveBtn: false
}
},
getActiveClass() {
if (this.isActiveBtn) {
return "btn btn-secondary active";
} else {
return "btn btn-secondary";
}
}