Bootstrap nav-Pillen in vue js 2

Question

Die jsfiddle war, https://jsfiddle.net/r6o9h6zm/2/

I Bootstrap nav Pillen in vue js verwendet haben 2, die Daten auf der ausgewählten Registerkarte (dh basierend anzuzeigen, wenn Klick über den Standard nicht ac Raum, die Aufzeichnung des bestimmten Raumes muss angezeigt werden), aber hier bekomme ich alle drei Räume in der Instanz und ich habe das folgende benutzt, um es zu erzielen, aber es gibt kein Ergebnis.

Html:

<div id="app"> 
<div class="room-tab"> 
    <ul class="nav nav-pills nav-justified tab-line"> 
    <li v-for="(item, index) in items" v-bind:class="{'active' : index === 0}"> 
     <a :href="item.id" data-toggle="pill"> {{ item.title }} </a> 
    </li> 
    </ul> 
    <div class="room-wrapper tab-content"> 
    <div v-for="(item, index) in items" v-bind:class="{'active' : index === 0}" :id="item.id"> 
     <div class="row"> 
     <div class="col-md-8"> 
     <div class="col-md-4"> 
      <h3>{{item.title}}</h3> 
      <p>{{item.content}}</p> 
     </div> 
     </div> 
    </div><br> 
    </div> 
</div> 

Script:

new Vue({ 
    el: '#app', 
    data: { 
    items: [ 
      { 
       id: "0", 
       title: "Standard Non AC Room", 
       content: "Non AC Room", 
      }, 
      { 
       id: "1", 
       title: "Standard AC Room", 
       content: "AC Room", 
      }, 
      { 
       id: "2", 
       title: "Deluxe Room", 
       content: "Super Speciality Room", 
      }, 
     ], 
    } 
}) 

Wie kann ich das Ergebnis mit Aufzeichnungen nur ausgewählte Zimmerkategorie bekommen und andere versteckt werden muss?

Answer 1

currentSelected: 0 eine data Eigenschaft hinzufügen, um zu verfolgen, von denen Raum ausgewählt

new Vue({ 
    el: '#app', 
    data: { 
     currentSelected: 0, 
      items: [ 
      { 
       id: "0", 
       title: "Standard Non AC Room", 
       content: "Non AC Room", 
      }, 
      { 
       id: "1", 
       title: "Standard AC Room", 
       content: "AC Room", 
      }, 
      { 
       id: "2", 
       title: "Deluxe Room", 
       content: "Super Speciality Room", 
      }, 
     ], 
    }, 
    methods:{ 
     selectRoom(index){ 
      this.currentSelected = index 
     } 
    } 
}) 

einen Klick Zuhörer hinzufügen auf jeder nav Pille gewählten Zimmer

<div id="app"> 
<div class="room-tab"> 
    <ul class="nav nav-pills nav-justified tab-line"> 
    <li 
     v-for="(item, index) in items" 
     v-bind:class="{'active' : index === currentSelected}" 
     @click="selectRoom(index)"> 
     <a> {{ item.title }} </a> 
    </li> 
    </ul> 
    <div class="room-wrapper tab-content"> 
    <div 
     v-for="(item, index) in items" 
     v-bind:class="{'active' : index === 0}" 
     v-if="index === currentSelected" 
     :key="item.id"> 
     <div class="row"> 
     <div class="col-md-8"> 
     <div class="col-md-4"> 
      <h3>{{item.title}}</h3> 
      <p>{{item.content}}</p> 
     </div> 
     </div> 
    </div><br> 
    </div> 
</div> 

Hier ändern ids die updated fiddle