在Vue中，单击时将多个按钮之一更改为活动状态

Question

I have three buttons, and when I click one of them, it needs to become active, and other two must become inactive. In code below all three are changing together to active/inactive on click event. Is there an elegant way to solve this, instead of creating three values isActive1, isActive2, isActive3 for all three buttons?

<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";
    }
}

Answer 1

Having three data properties would be one way to do it. Or you might have a prop activeBtn where you store the name (or index) of the active btn. You will then need to change the getActiveClass method to accept an argument with the name or index of the button.

Answer 2

I would suggest to store the currently active city as your data. In getActiveClass pass and compare the ID of a button to the currently active ID and set the class accordingly.

<div class="btn-group" role="group">
  <button type="button" :class="getActiveClass('Kyiv')" v-on:click="getWeather('Misto Kyyiv'); activeId = 'Kyiv'">Kyiv</button>
  <button type="button" :class="getActiveClass('London')" v-on:click="getWeather('London'); activeId = 'London'">London</button>
  <button type="button" :class="getActiveClass('New York')" v-on:click="getWeather('New York'); activeId = 'New York'">New York</button>
</div>

getActiveClass(id) {
  if (id === this.activeId) {
    return "btn btn-secondary active";
  } else {
    return "btn btn-secondary";
  }
}