Как сделать tab активным динамически на основе внешнего управления?

Question

[Алексей]

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

Опирался на документацию https://bootstrap-vue.org/docs/components/tabs#dyn...
Vue2

место где лежат страницы табов
<template>
  <div class="row">
    <div class="col-md-2">
      <WagonNavbar :tabs="tabs" :counter="counter"></WagonNavbar>
    </div>
    <div class="col-md-10">
        <p class="infoNull" v-if="tabs.length === 0">
        Вы не выбрали ещё ни одной таблицы
      </p>
      <b-card no-body class="leftTable">
        <b-tabs card>
          <b-tab v-for="i in tabs" :key="i.id">
            <template #title>
              <span>Таблица {{ i.name }}</span>
              <span @click="closeTab(i.id)">&nbsp;&nbsp;❌</span>
            </template>

            <b-card-text>
              <div :active="i.name === 'Рейсы'" v-if="i.name === 'Рейсы'">
                <FlightTable />
              </div>
              <div :active="i.name === 'Вагоны'" v-if="i.name === 'Вагоны'">
                <!-- <WagonTable/> -->
                <component :is="wt"></component>
              </div>
    
              <div :active="i.name === 'Расчет'" v-if="i.name === 'Расчет'">
                <WPCalculate />
              </div>
              <div  :active="i.name === 'Отправки БЧ'" v-if="i.name === 'Отправки БЧ'">
                <BCH />
              </div>
              <div :active="i.name === 'Брошенные вагоны'" v-if="i.name === 'Брошенные вагоны'">
                <AbandonTable />
              </div>
              <div :active="i.name === 'Телеграммы'" v-if="i.name === 'Телеграммы'">
                <WagonTableTelegram />
              </div>
              <div :active="i.name === 'Ремонты'" v-if="i.name === 'Ремонты'">
                <WagonRepair />
              </div>
              <div :active="i.name === 'Полигоны'" v-if="i.name === 'Полигоны'">
                <WagonTablePoligon />
              </div>
              <div :active="i.name === 'Дислокация'" v-if="i.name === 'Дислокация'">
                <DislocationTable />
              </div>
              <div :active="i.name === 'Рейсы'" v-if="i.name === 'Отчет брошенные вагоны'">
                <ReportAbandoned />
              </div>
            </b-card-text>
          </b-tab>
        </b-tabs>
      </b-card>
    </div>
  </div>
</template>
 methods: {
    closeTab(x) {
      for (let i = 0; i < this.tabs.length; i++) {
        if (this.tabs[i].id === x) {
          this.tabs.splice(i, 1);
        }
      }
      localStorage.setItem("tabs", JSON.stringify([...this.tabs]));
    },

  },

вызов таба
<template>
  <div id="navbarMain">
    <b-card no-body>
      <b-tabs
        pills
        card
        vertical
        nav-wrapper-class="w-100" style="background: white;height: 100vh !important;
          text-align: center !important;
          justify-content: center !important;
        "
      >
        <b-container class="bv-example-row">
          <b-tab title="Вагоны" @click="newTab('Вагоны')"> </b-tab>
          <b-tab title="Телеграммы" @click="newTab('Телеграммы')"> </b-tab>
          <b-tab title="Ремонты" @click="newTab('Ремонты')"> </b-tab>
          <b-tab title="Расчет" @click="newTab('Расчет')"> </b-tab>
          <b-tab title="Отправки БЧ" @click="newTab('Отправки БЧ')"> </b-tab>

        </b-container>
      </b-tabs>
    </b-card>
  </div>

</template>
  
  <script>
export default {
  name: "Navbar",
  props: ["tabs", "counter"],
  data: function () {
    return {
      inner_counter: this.counter,
    };
  },
  methods: {
    newTab(tabname) {
      this.tabs.push({ name: tabname, id: Date.now() });
      localStorage.setItem("tabs", JSON.stringify([...this.tabs]));
      
    },
  },
};

Comments

[iljaGolubev]

<div :active="i.name === 'Рейсы'" v-if="i.name === 'Отчет брошенные вагоны'">

никогда не станет active

в "опорной" документации есть пример v-model="tabIndex" , а вот :active= там нет.

а даже если бы было, то корректная проверка была бы :active=="activeTabName".

[Алексей]

iljaGolubev, насчет active согласен, тот прикол описывает статичное положение tabов, но при динамике оно уже не отрабатывает

Answer 1

[Алексей]

Решение следующее

<b-tabs card v-model="tabActive" @changed="onTabChanged">
data(){
return{
tabActive: 0
}
  methods: {
  onTabChanged() {
      this.tabActive = this.tabs.length - 1;
    }
}