Bootstrap vue js 2 中的导航丸

Question

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

我在 vue js 2 中使用了 bootstrap nav pills，以根据所选选项卡显示数据（即，如果单击标准非空调房间，则需要记录该特定房间的记录显示）但在这里我得到了所有三个房间的实例，我使用了以下方法来实现它，但它没有给出任何结果。

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>

这里是 updated fiddle

Bootstrap vue js 2 中的导航丸

Bootstrap nav-pills in vue js 2

html

twitter-bootstrap

nav-pills

vue.js

vuejs2