Я пытаюсь динамически обновить элементы, отображаемые в группе Vuetify <v-tabs-items>, но анимация работает некорректно. Когда я выбираю только что добавленную вкладку, анимация всегда действует так, как если бы эта вкладка была справа, несмотря на то, что она находится слева в DOM. Как я могу исправить это, чтобы порядок, в котором вкладки отображаются на панели вкладок, отражал направление движения?

В этом примере обратите внимание, что для исходных вкладок нажатие на вкладку дальше вправо вызывает ее анимацию справа. Однако после добавления новой вкладки слева щелчок по этой новой вкладке заставляет ее скользить справа, а не слева.

Песочница

<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>
0
Charlie Harding 16 Фев 2021 в 15:34

1 ответ

Лучший ответ

Вы должны использовать опору href для v-tab и id опору для v-tab-item - иначе это не сработает. Вкладки должны иметь уникальные строковые идентификаторы - использование числовой индексации по умолчанию чревато ошибками, поскольку она (числовая индексация) зависит от порядка создания вкладок, а не их положения в DOM.

Каждый раз, когда VTabs обнаруживает новую вкладку, она проходит через ловушку created() в mixins/groupable/index.js, которая, в свою очередь, вызывает метод register() в VItemGroup.js. Новые вкладки всегда помещаются во внутренний массив с вкладками, поэтому их внутренний порядок (который используется анимацией) зависит от порядка их создания.

Вы не можете изменить это поведение, если не исправите 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>
1
IVO GELOV 18 Фев 2021 в 06:50