Dynamically add v-tab-item while maintaining animation order

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>

12 thoughts on “Dynamically add v-tab-item while maintaining animation order”

Leave a Comment