为什么我没有得到更新的标签索引我的v-模型？

Question

我使用VueJS创建了一个带有多个选项卡的简单应用程序，但似乎无法将选项卡设置为active。它们在组件之间正确地切换，但是制表符从未激活。我认为文档有助于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>

我添加的控制台日志来检查发生了什么。我解决不了这个..。

Answer 1

根据Vue-路由器 & 引导-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>

​

Answer 2

方法被称为一次性和非反应性方法。

更改您的导航项目如下：

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