在保持动画顺序的同时动态添加 v-tab-item

Question

我正在尝试动态更新 Vuetify <v-tabs-items> 组中显示的项目，但动画无法正常工作。当我选择一个新添加的选项卡时，动画总是表现得好像该选项卡在右侧，尽管它在 DOM 中位于左侧。如何更正此问题，以便选项卡在选项卡栏中出现的顺序反映了移动方向？

在此示例中，请注意对于原始选项卡，单击更右侧的选项卡会使其从右侧动画化。但是，在左侧添加新选项卡后，单击此新选项卡会使其从右侧滑入，而不是从左侧滑入。

Sandbox

<template>
  <v-app>
    <v-card>
      <v-tabs v-model="chosenTab" grow>
        <v-tab v-for="x in xs" :key="x">
          {{ x }}
        </v-tab>
      </v-tabs>
      <v-tabs-items v-model="chosenTab">
        <v-tab-item v-for="x in xs" :key="x">
          <v-card flat>
            <v-card-text>
              {{ x }}
            </v-card-text>
          </v-card>
        </v-tab-item>
      </v-tabs-items>
      <v-card-actions>
        <v-btn @click="xs.unshift('new-tab-' + xs.length)"> Add new tab </v-btn>
      </v-card-actions>
    </v-card>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      chosenTab: null,
      xs: ["tab-0", "tab-1", "tab-2"],
    };
  },
};
</script>

Answer 1

您应该在v-tab 上使用href 属性，在v-tab-item 上使用id 属性 - 否则它将不起作用。选项卡必须具有唯一的字符串标识符 - 依赖默认数字索引容易出错，因为它（数字索引）取决于选项卡的创建顺序而不是它们在 DOM 中的位置。

每次 VTabs 检测到新选项卡时 - 它都会通过 mixins/groupable/index.js 中的 created() 钩子，该钩子又会调用 VItemGroup.js 中的 register() 方法。新标签总是被推送到带有标签的内部数组 - 所以它们的内部顺序（动画使用）取决于它们的创建顺序。

除非您修补 Vuetify，否则您无法更改此行为。所以为了克服它 - 你必须key v-tab-item 通过他们的索引而不是他们的ID。是的，这将导致不必要的重新渲染 - 但这是解决这种“错误”Vuetify 行为的代价，直到他们修复它。

<template>
  <v-app>
    <v-card>
      <v-tabs v-model="chosenTab" grow>
        <v-tab v-for="x in xs" :key="x" :href="'#'+x">
          {{ x }}
        </v-tab>
      </v-tabs>
      <v-tabs-items v-model="chosenTab">
        <v-tab-item v-for="(x,idx) in xs" :key="idx" :id="x">
          <v-card flat>
            <v-card-text>
              {{ x }}
            </v-card-text>
          </v-card>
        </v-tab-item>
      </v-tabs-items>
      <v-card-actions>
        <v-btn @click="xs.unshift('new-tab-' + xs.length)"> Add new tab </v-btn>
      </v-card-actions>
    </v-card>
  </v-app>
</template>