ブートストラップのnav-薬は2

Question

jsfiddleた、https://jsfiddle.net/r6o9h6zm/2/

私はすなわち、標準以外のACオーバー]をクリックした場合（選択したタブに基づいてデータを表示するには、VUEのJS 2にブートストラップNAVの丸薬を使用していましたその特定の部屋の記録を表示する必要があります）しかし、ここで私は3つの部屋すべてをインスタンスで取得しており、それを達成するために次のものを使用しましたが、結果は得られません。

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> 

スクリプト：

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", 
      }, 
     ], 
    } 
}) 

私は選択した部屋タイプなどの記録と結果を得ることができますどのように非表示にする必要がありますか？

Answer 1

選択部屋

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

を変更するには、各NAVピルのクリックリスナーを追加します。部屋は

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

を選択されているのを追跡するためにdataプロパティcurrentSelected: 0を追加します。ここupdated fiddle

をIDS