How to add hash at end of URL when clicking on Bootrap-vue tabs?

user_574122 0
Viewed 2138

In my single file Vue component I have:

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

I am using standard Vue Router and I can access this.$router What I want is that when a tab is clicked (or touched ) the URL should be appended #dogs or #cats at the end of current URL depending on which tab was clicked replacing current hash if any.

The farthest progress I could make is to capture input event defined for tabs component:

<b-tabs v-on:input="doShowTab">
 ....

</b-tabs>

....

methods: {
    doShowTab(index) {
      console.log(index)
    },

Log prints tab index correctly. How to solve this issue?

My actual tabs code is much complicated showing some tabs and hiding some depending of state. But I have much simplified the code here.

bootstrap-vue vuejs2 vue.js
1 Answers

this might work

<b-tabs ref="tabs" v-on:input="doShowTab">
 ....

</b-tabs>

doShowTab(index) {
  let tabID = this.$refs.tabs.$children.length/2+index;
  let tab = this.$refs.tabs.$children[tabID];
  location.hash = tab.href;
},
user_48052210
Related