为什么我的 v-model 上没有更新的标签索引？答案

【问题标题】：Why am I not getting an updated tab index on my v-model?为什么我的 v-model 上没有更新的标签索引？
【发布时间】：2020-04-15 03:43:04
【问题描述】：

我正在使用VueJS 创建一个带有多个选项卡的简单应用程序，但似乎无法将选项卡设置为活动状态。它们在组件之间正确切换，但选项卡永远不会激活。我认为文档帮助了 v-model 然后以编程方式添加活动类，但选项卡索引号不会更新，因此切换永远不会更新新选项卡的类。

        <template>
        <div class="home">

            <b-container fluid class="mt-3">
              <b-row>
                <b-col>
                  <b-card title="Card Title" body-class="text-center" header-tag="nav">
                    <template v-slot:header>
                      <b-nav card-header tabs justified v-model="tabIndex">
                        <b-nav-item to="/app/page" :active-class="linkClass(0)">Main</b-nav-item>
                        <b-nav-item to="/app/page/example" :active-class="linkClass(1)">Example</b-nav-item>
                        <b-nav-item to="/app/page/exampletwo" :active-class="linkClass(2)">Example Two</b-nav-item>
                      </b-nav>
                    </template>

                    <b-card-text>
                      <!-- With supporting text below as a natural lead-in to additional content. -->
                      <router-view></router-view>
                    </b-card-text>

                    <!-- <b-button variant="primary">Go somewhere</b-button> -->
                  </b-card>
                </b-col>
              </b-row>
            </b-container>

          </div>
        </template>

    <script>

        // @ is an alias to /src

        export default {
          name: 'AppHome',
          data() {
            return {
              tabIndex: 0
            }
          },
          methods: {
            linkClass(idx) {
              if (this.tabIndex === idx) {
                console.log(idx + ' act')
                console.log(this.tabIndex)
                return 'active'
              } else {
                console.log(idx + ' in')
                console.log(this.tabIndex)
                return ''
              }
            }

          }
        }
        </script>

我添加的控制台日志是为了检查发生了什么。我无法解决这个问题。

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

方法被调用一次 - 并且不是响应式的。

像这样更改您的导航项目：

<b-nav-item 
    to="/app/page" 
    :active-class="tabIndex === 0 ? 'active' : ''"
>Main</b-nav-item>

或者以更灵活的方式：

<b-nav-item 
   v-for="(route, index) in routes" 
   :key"route.name+'-'+index" 
   :to="route.path" 
   :active-class="tabIndex===index?'active':''"
>
   {{route.name}}
</b-nav-item>

【讨论】：

【解决方案2】：

根据Vue-Router & Bootstrap-Vue/nav 应该是这样的：

const Home = { template: '<div>home</div>' }
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const routes = [
  { path: '/', component: Home },
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes
})

new Vue({
  el:'#app',
  router,
  data: {
    navs: [
      { to: '/', link: 'home' },
      { to: '/foo', link: 'foo' },
      { to: '/bar', link: 'bar' }
    ]
  }
});

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <b-nav tabs>
    <b-nav-item
      v-for="(nav, index) in navs" :key="index"
      :to="nav.to"
      exact exact-active-class="active"
    >
      {{ nav.link }}
    </b-nav-item>
  </b-nav>
  
  <router-view></router-view>
  
</div>

【讨论】：