Как получить объект выбранной вкладки vuetify, а не индекса?

Question

По умолчанию событие изменения v-tabs предоставляет индекс новой вкладки. У меня проблемы с неверным индексом, если элементы вкладок динамические c.

<v-tabs :slider-size=4 v-model="tabs" @change="tabChangeHandler">
        <div v-for="(obj) in computedMasterTabsList" :key="'div'+obj.key">
          <v-tab v-if="obj.permission" :key="obj.key" @click="tabClickHandler(obj)">{{obj.label}}
          </v-tab>
       </div>
</v-tabs>

Dynami c пример списка вкладок :

[{key: 1, name:"A", permission: false, label:'Label A'}, {key: 2, name:"B", permission: true, label:'Label B'}, {key: 3, name:"C", permission: true, label:'Label C'}]

Отображение вкладок : у кого есть permission: true

При смене вкладок получение значения выбранной вкладки составляет 0 или 1 .

Я не могу получить выбранный объект из списка, используя 0 и 1 .

Может кто-нибудь помочь мне с этим? Заранее спасибо.

Answer 1

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

codepen - https://codepen.io/Pratik__007/pen/XWbXZKw?editors=1010;

this.selected_index = this.computedMasterTabsList.indexOf(obj);

mounted(){
    let i=0;
    for(i in this.computedMasterTabsList){
        if(this.computedMasterTabsList[i]['permission']==true){
          console.log(i)
          this.selected_index = i;
          break;
        }
    }
  }