Bootstrap nav-pills in vue js 2

Question

The jsfiddle was, https://jsfiddle.net/r6o9h6zm/2/

I have used bootstrap nav pills in vue js 2, to display the data based on the selected tab (i.e, if click over the standard non ac room, the record of that particular room need to be displayed) but here i am getting all the three rooms at instance and i have used the following to achieve it, but it gives no result.

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

How can i get the result with records of only selected room type and others needs to be hidden?

Answer 1

Add a data property currentSelected: 0 to keep track of which room is selected

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

Add a click listener on each nav pill to change the selected room

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

Here ids the updated fiddle