How to navigate to specific tab in Bootstrap-vue tabs in vue routes?

Question

I am using Bootstrap-vue tabs. This is HTML for tabs:

<b-tabs>
  <b-tab title="Exotic Dogs" href="#dogs">
    <br>Dogs here
  </b-tab>
  <b-tab title="Exotic Cats"  href="#cats">
    <br>Cats here
  </b-tab>

</b-tabs>

Here is the route for cats:

{
        path: '/animals/:id#cats',
        name: 'getCats',
        component: Animals // removed from HTML to simplify
    },

In component code:

this.$router.replace({ name: 'getCats', params: { id: this.$route.params.id }})

This will take to:

localhost:3000/animals/234909888#cats

But dogs tab is open (the first tab) instead of cats tab. Also refreshing browser will display blank page.

How to fix this issue?

I think a far more intuitiv Structure would be path: '/animals/cats/:id', — niclas_4
– niclas_4, Commented Aug 30, 2018 at 6:55

Richard Matsen · Accepted Answer · 2018-09-02 21:41:40Z

5

You could try adding v-model="tabIndex" to the <b-tabs> tag, and use $route.hash to set it in mounted().

<b-tabs v-model="tabIndex">
  <b-tab title="Exotic Dogs" href="#dogs">
    <br>Dogs here
  </b-tab>
  <b-tab title="Exotic Cats"  href="#cats">
    <br>Cats here
  </b-tab>

</b-tabs>

export default {
  ...
  data() {
    return {
      tabIndex: 0,
      tabs: ['#dogs', '#cats']
    }
  },
  mounted() {
    this.tabIndex = this.tabs.findIndex(tab => tab === this.$route.hash)
  }
  ...
}

edited Sep 2, 2018 at 21:41

answered Sep 2, 2018 at 9:56

Richard Matsen

20.9k3 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ace Over a year ago

Richard I tried it but does not work I get this.$el as undefined. I am using single file component.

Richard Matsen Over a year ago

Indeed, that is one of the most frustrating things in Vue, some properties are not available when you expect them to be. In this case, we can switch to using the mounted() hook - but even then b-tabs is not finished rendering so querySelectorAll cannot find the hrefs on the tabs. The way around that is to be explicit about the tabs in data(). It is a better solution anyway, as the logic is simpler.

William Hammock Over a year ago

This worked prefect for me, I was worried because the documentation it said href was deprecated. My path was "/prefs#lt" . Note to other devs, the "#" in the tabs array are important for the match to work ... my tabs were. tabs: ["#lr", "#lt", "#ts", "#cj", "#cjw", "#ps", "#bo"]

kp85 Over a year ago

Doing the tabIndex change on mounted() doesn't work, as it takes the value from data itself. Keeping code in the beforeMount() worked for me.

Collectives™ on Stack Overflow

How to navigate to specific tab in Bootstrap-vue tabs in vue routes?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related