如何在Vue中將樣式化類應用於按鈕，但一次只能激活一個按鈕？

Question

我設法使此按鈕類從初始更改為is-active，但是我想擁有多個按鈕，但是is-active類只能在任何時候應用於一個按鈕。

<button :class="{'initial': activeTab !== 1, 'is-active': activeTab === 1}" name="button" @click="setActiveTab">BUTTON 1</button>

  activeTab: 0

  methods: {
      setActiveTab(){
        this.activeTab = 1;
      }
  }

  .is-active {
  color: blue
}

.initial {
color: red;
}

但想擁有：

<button :class="{'initial': activeTab !== 1, 'is-active': activeTab === 1}" name="button" @click="setActiveTab">BUTTON 1</button>
<button :class="{'initial': activeTab !== 1, 'is-active': activeTab === 1}" name="button" @click="setActiveTab">BUTTON 2</button>
<button :class="{'initial': activeTab !== 1, 'is-active': activeTab === 1}" name="button" @click="setActiveTab">BUTTON 3</button>

任何幫助將不勝感激。

Answer 1

您只需將id傳遞給setActiveTab方法

 new Vue({ el: "#app", data: { activeTab: 0 }, methods: { setActiveTab(id){ this.activeTab = id; } } }) 

 <div id="app"> <button :class="{'initial': activeTab !== 1, 'is-active': activeTab === 1}" name="button" @click="setActiveTab(1)">BUTTON 1</button> <button :class="{'initial': activeTab !== 2, 'is-active': activeTab === 2}" name="button" @click="setActiveTab(2)">BUTTON 2</button> <button :class="{'initial': activeTab !== 3, 'is-active': activeTab === 3}" name="button" @click="setActiveTab(3)">BUTTON 3</button> </div> 

看到這個JSFiddle

您可以使用v-for ..整理一些東西。

<div id="app">
  <button v-for="id in 3" :class="{'initial': activeTab !== id, 'is-active': activeTab === id}" name="button" @click="setActiveTab(id)">BUTTON {{ id }}</button>
</div>

的jsfiddle