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

Question

I am trying to dynamically update the items shown in a Vuetify <v-tabs-items> group, but the animation is not working properly. When I select a newly added tab, the animation always acts as if that tab were to the right, despite it being to the left in the DOM. How can I correct this, so the order that the tabs appear in the tab bar reflects the direction of movement?

In this example, note that for the original tabs, clicking on a tab further right causes it to be animated in from the right. However, after adding a new tab on the left, clicking on this new tab causes it to slide in from the right not the left.

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

You should use href prop on v-tab and id prop on v-tab-item - otherwise it will not work. Tabs must have unique string identifiers - relying on the default numeric indexing is error-prone because it (the numeric indexing) depends on the tab's creation order rather than their position in DOM.

Every time a new tab is detected by VTabs - it goes through the created() hook in mixins/groupable/index.js which in turn calls register() method in VItemGroup.js . New tabs are always pushed to the internal array with tabs - so their internal order (which is used by the animation) depends on their creation order.

You can not change this behavior unless you patch Vuetify. So in order to overcome it - you must key the v-tab-item by their index rather than by their ID. Yes, this will cause needless rerendering - but this is the price for working around this "wrong" Vuetify behavior until they fix it.

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