Tabbed navigation in Vue.Js

Question

Ich versuche, ein einfaches Tabbed-Navigationssystem mit Vue zu erstellen. Ich erfasse die Navigationswahl des Benutzers und rufe eine Funktion auf, die bestimmte Daten ändert. Diese Daten werden letztendlich bestimmen, welcher Tab aktiv sein soll. Bisher habe ich dies:

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

Im Moment, wenn der Benutzer klickt auf Start Link, beide zu Hause und Infos divs bekommen homeActive Klasse Dies liegt daran, dass ich mit dieser grundlegenden Logik zwei Anweisungen mit meinen Methoden nicht zurückgeben konnte:

enable tab1 & disable tab2 || Aktivieren Sie die Registerkarte 2 & deaktivieren Tab1

Ich versuche verschiedene Ansätze, aber ich kann nur einen einzigen Zustand mit aufgerufenen Methoden aufgrund der Bindung meiner Inhalte an eine einzige Klasse beeinflussen.

Irgendwelche Vorschläge, wie ich das mit Vue arbeiten kann?

Answer 1

Die Art, wie ich dies in der Regel lösen, ist durch eine andere Funktion isActiveTab wie so Hinzufügen ...

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

dann Ihrer Ansicht nach ...

<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>