Как добавить хеш в конце URL при нажатии на вкладки Bootrap-vue? - PullRequest
Новая
       6

Как добавить хеш в конце URL при нажатии на вкладки Bootrap-vue?

0 голосов
/ 13 ноября 2018

В моем отдельном компоненте Vue у меня есть: 

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

Я использую стандартный Vue Router и могу получить доступ к this.$router Что я хочу, так это чтобы при нажатии (или касании) вкладки URL-адресдолжен добавляться #dogs или #cats в конце текущего URL в зависимости от того, какая вкладка была нажата, заменяя текущий хеш, если таковой имеется.

Самый дальнейший прогресс, который я мог бы сделать, - захватить входное событие, определенное для компонента вкладок: 

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

</b-tabs>

....

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

Журнал печатает индекс вкладки правильно.Как решить эту проблему?

Мой настоящий код вкладок очень сложен, показывая некоторые вкладки и скрывая некоторые в зависимости от состояния.Но я значительно упростил код здесь.

1 Ответ

0 голосов
/ 13 ноября 2018

это может сработать 

<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;
},
...