如何获取所选 vuetify 选项卡的对象，而不是索引？

Question

默认情况下，v-tabs 更改事件提供新选项卡的索引。如果选项卡项是动态的，我将面临索引错误的问题。

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

动态选项卡列表示例：

[{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;
        }
    }
  }

如何获取所选 vuetify 选项卡的对象，而不是索引？

How to get object of selected vuetify tab, not index?

tabs

vue.js

vuetify.js