更改 v-model 时，Vuetify 选项卡不会更改答案

【问题标题】：Vuetify tabs won't change when changing v-model更改 v-model 时，Vuetify 选项卡不会更改
【发布时间】：2022-10-15 03:27:16
【问题描述】：

当我将一个值放入控制组件的变量中时，我目前正在尝试更改活动选项卡，但它不起作用。我将一个变量绑定到 v-model，然后用我想要的值更改该变量。关键是，无论值是数字还是字符串，都没有关系，因为制表符不起作用。

<v-card flat>
        <v-tabs v-model="tab" fixed-tabs>
            <v-tab v-for="(instance, idx) in tabData" :key="`${idx}`" @click="callChildrenToUpdate(idx)">
            <v-badge color="red" size="18" class="p-2" v-if="instance"></v-badge>
            ...
            </v-tab>
        </v-tabs>
       ...
</v-card>

数据：

data () {
        return {
            tab: null,
            items: [],
            tabData: this.tabsData
        }
    },

然后在挂载的钩子中我尝试改变它，但它不起作用。

this.tab = 87

【问题讨论】：

通过 UI 更改选项卡，并使用 Vue 开发工具查看 tab 值是否更改
是的，它发生了变化，但是当它发生时的选项卡值就像：0、1、2...不能是我给他们的钥匙吗？太奇怪了。
这适用于我使用 Vuetify 提供的沙箱：codepen.io/mrichar1/pen/VwMMeqz
@mrssolaris no tab 将从第一个到最后一个分别跟随 0、1、2...。
是的，但它仍然不起作用。至少在安装的钩子上。如果我在创建的组件中这样做，它就可以工作。

标签： vue.js vue-component vuetify.js

【解决方案1】：

在这种情况下，设置 tab 键时不要使用模板字符串。

所以要让它工作，改变这个：

<v-tab v-for="(instance, idx) in tabData" :key="`${idx}`" @click="callChildrenToUpdate(idx)">

至：

<v-tab v-for="(instance, idx) in tabData" :key="idx" @click="callChildrenToUpdate(idx)">

现在当你这样做时：

this.tab = 87

你应该让你的标签进入索引87（这似乎很多）。如果这实际上是一个 ID，您可以执行如下逻辑：

this.tab = this.tabData.findIndex(i => i.id === 87)

【讨论】：