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.


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

export default {
  data() {
    return {
      chosenTab: null,
      xs: ["tab-0", "tab-1", "tab-2"],

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

Leave a Comment