v-bind 不适用于 v-tabs 我必须使用 v-model

Question

我正在使用 vuetify 组件，并将默认显示设置为 page-2 （学生），但是当我单击第二个选项卡 professors （第 1 页）时，什么也没有发生。

当我用 v-model 更改 :value 时，它起作用了。

我不明白为什么它适用于双向绑定，而不适用于单向绑定

AFAIK v-model 使用输入元素（表单）并在两个方向获取值：模板/脚本和脚本/模板，我错了吗？

    <v-tabs :value="tab">
      <v-tab href="#page-2" >
        {{ 'students' }}
      </v-tab>
      <v-tab href="#page-1">
        {{ 'professors' }}
      </v-tab>

Answer 1

根据 vuetify 3 文档，您应该使用

model-value

（请参阅：https://vuetifyjs.com/en/api/v-tabs/#props-model-value）

像这样更新你的代码，它应该可以工作：

<v-tabs :model-value="tab">
  <v-tab href="#page-2" >
    {{ 'students' }}
  </v-tab>
  <v-tab href="#page-1">
    {{ 'professors' }}
  </v-tab>
</v-tabs>