Question

我有三个按钮，当我单击其中一个按钮时，它需要变为活动状态，而其他两个按钮必须变为非活动状态。在下面的代码中，所有三个事件都一起变为有效/无效的点击事件。是否有一种优雅的方法可以解决此问题，而不是为所有三个按钮创建三个值isActive1, isActive2, isActive3？

<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

拥有三个数据属性将是一种实现方法。或者，您可能有一个属性activeBtn，用于存储活动btn的名称（或索引）。然后，您需要更改getActiveClass方法，以接受带有按钮名称或索引的参数。

Answer 2

我建议将当前活动的城市存储为您的数据。在getActiveClass中，将按钮的ID与当前活动的ID进行比较，然后相应地设置类别。

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

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

2 个答案: