Vue.Js中的選項卡式導航

Question

我試圖用Vue創建基本的選項卡式導航系統。我正在捕獲用戶的導航選項並調用更改某些數據的函數。該數據最終將決定哪個選項卡應該處於活動狀態。到目前爲止，我有這樣的：

HTML

<div id="app"> 
    <div id="nav"> 
     <a href='#' class="tab" v-on:click="makeActive('homeActive')">Home</a> 
     <a href='#' class="tab" v-on:click="makeActive('infoActive')">Info</a> 
    </div> 
    <div class="content"> 
     <div class="boxes" id="home" v-bind:class="choice"> 
     </div> 
     <div class="boxes" id="info" v-bind:class="choice"> 
     </div> 
    </div> 
</div> 

Vue公司

new Vue({ 
    el: '#app', 
    data: { 
     choice: 'homeActive' // Home is chosen by default 
    }, 
    methods: { 
     makeActive: function(val) { 
      this.choice = val; 
     } 
    } 
}); 

目前，如果在首頁鏈接的用戶點擊，家庭和信息的div得到homeActive類，這是因爲我無法用這個基本邏輯用我的方法返回兩條語句：

啓用tab1 &禁用tab2 ||啓用選項卡2 &禁用選項卡1

我正在嘗試不同的方法，但由於將我的內容綁定到單個類，因此只能調用具有調用方法的單個狀態。

關於如何使用Vue工作的任何建議？

Answer 1

我一般解決這個的方法是通過附加其它功能isActiveTab是這樣的...

new Vue({ 
    el: '#app', 
    data: { 
     choice: 'homeActive' // Home is chosen by default 
    }, 
    methods: { 
     makeActive: function(val) { 
      this.choice = val; 
     }, 
     isActiveTab: function(val) { 
      return this.choice === val; 
     } 
    } 
}); 

在你看來

則...

<div id="app"> 
    <div id="nav"> 
     <a href='#' class="tab" v-on:click="makeActive('homeActive')">Home</a> 
     <a href='#' class="tab" v-on:click="makeActive('infoActive')">Info</a> 
    </div> 
    <div class="content"> 
     <div class="boxes" id="home" v-show="isActiveTab('homeActive')"> 
     </div> 
     <div class="boxes" id="info" v-show="isActiveTab('infoActive')"> 
     </div> 
    </div> 
</div>