[Vuejs]-Why am I not getting an updated tab index on my v-model?

by

1👍

✅

According Vue-Router & Bootstrap-Vue/nav it should work like this:

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>
👤Christian Carrillo

0👍

Methods are called once – and arent reactive.

Change your nav items like this:

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

or in a more flexible manner:

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

Leave a comment