引導NAV-丸劑在VUE JS 2

Question

的的jsfiddle是，https://jsfiddle.net/r6o9h6zm/2/

我在VUE JS 2中使用的自舉NAV丸劑，顯示基於所選擇的選項卡（即，在數據中，如果點擊在標準的非交流房間，需要顯示該特定房間的記錄），但是在這裏，我得到了所有三個房間的實例，並且我已經使用以下來實現它，但它不會產生任何結果。

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

添加data財產currentSelected: 0跟蹤哪個房間選擇

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

添加點擊監聽器上的每個導航丸更改所選房間

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

這裏ID的updated fiddle