vuetify2 到 vuetify3 过渡组不再工作

Question

所以我目前正在努力从 Vue2 Vuetify2 过渡到 Vue3 Vuetify3，老实说这是一个相当大的挑战。看来我的代码需要越来越少地依赖 Vuetify，因为像 v-treeview 这样的东西已经无法修复，我不得不重新编码所有内容。

目前正在尝试简单地使用 v-list-items 制作一个 v-list，其中每个项目向上和向下都会有一个过渡，但这似乎不可能。由于某种原因，过渡似乎只在向下移动时起作用，而在向上移动时不起作用，并且无论如何也永远不会与最后一个项目一起起作用。这是一段简单的代码的尝试，只是尝试使转换正确发生，尝试尽可能地遵循 Vuejs 列表转换示例，但使用 v-list 代替（您可以在 VPlay 上轻松尝试） :

<template>
  <v-container>
    <v-list>
      <transition-group name="list" tag="div" class="container">
        <v-list-item
          v-for="(item, index) in items"
          :key="item.id"
          :title="item.title"
          :subtitle="'Position: ' + (index + 1)"
          class="item"
        >
          <template v-slot:prepend>
            <v-btn icon @click="moveItemUp(index)" :disabled="index === 0">
              <v-icon>mdi-arrow-up</v-icon>
            </v-btn>
            <v-btn
              icon
              @click="moveItemDown(index)"
              :disabled="index === items.length - 1"
            >
              <v-icon>mdi-arrow-down</v-icon>
            </v-btn>
          </template>
        </v-list-item>
      </transition-group>
    </v-list>
  </v-container>
</template>

<script setup>
  import { ref } from 'vue'

  const items = ref([
    { id: 1, title: 'Item 1' },
    { id: 2, title: 'Item 2' },
    { id: 3, title: 'Item 3' },
    { id: 4, title: 'Item 4' },
    { id: 5, title: 'Item 5' },
  ])

  const moveItemUp = index => {
    if (index > 0) {
      const item = items.value.splice(index, 1)[0]
      items.value.splice(index - 1, 0, item)
    }
  }

  const moveItemDown = index => {
    if (index < items.value.length - 1) {
      const item = items.value.splice(index, 1)[0]
      items.value.splice(index + 1, 0, item)
    }
  }
</script>

<style scoped>
  .container {
    position: relative;
    padding: 0;
    list-style-type: none;
  }

  .item {
    width: 100%;
    height: 80px;
    background-color: #f3f3f3;
    border: 1px solid #666;
    box-sizing: border-box;
  }

  .list-move,
  .list-enter-active,
  .list-leave-active {
    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  }
  .list-enter-from,
  .list-leave-to {
    opacity: 0;
    transform: scaleY(0.01) translate(30px, 0);
  }
  .list-leave-active {
    position: absolute;
  }
</style>

我是否需要再次选择退出 vuetify 组件，或者还有什么我尚未理解的内容？我看过这个问题，看起来很有希望，但不幸的是这不是同一个问题。

Answer 1

Vuetify 3 中的 VList 似乎有问题。 首先，@MoritzRingler 指出该问题似乎仅发生在 Chrome 而不是 Firefox 中，因此这似乎确实是一个特定于浏览器的问题。

此外，正如 @yoduh 指出的那样，这个问题似乎有一个简单的解决方法，您可以简单地完全删除 v-list，问题就会突然消失。

这显然是一个错误，所以我将直接在 Vuetify github 页面上打开一个问题。

对于那些感兴趣的人，解决问题的最简单方法是在上面提供的代码中将 v-list 更改为 div，因此：

<template>
  <v-container>
    <div>
      <transition-group name="list" tag="div" class="container">
        <v-list-item
          v-for="(item, index) in items"
          :key="item.id"
          :title="item.title"
          :subtitle="'Position: ' + (index + 1)"
          class="item"
        >
          <template v-slot:prepend>
            <v-btn icon @click="moveItemUp(index)" :disabled="index === 0">
              <v-icon>mdi-arrow-up</v-icon>
            </v-btn>
            <v-btn
              icon
              @click="moveItemDown(index)"
              :disabled="index === items.length - 1"
            >
              <v-icon>mdi-arrow-down</v-icon>
            </v-btn>
          </template>
        </v-list-item>
      </transition-group>
    </div>
  </v-container>
</template>

<script setup>
  import { ref } from 'vue'

  const items = ref([
    { id: 1, title: 'Item 1' },
    { id: 2, title: 'Item 2' },
    { id: 3, title: 'Item 3' },
    { id: 4, title: 'Item 4' },
    { id: 5, title: 'Item 5' },
  ])

  const moveItemUp = index => {
    if (index > 0) {
      const item = items.value.splice(index, 1)[0]
      items.value.splice(index - 1, 0, item)
    }
  }

  const moveItemDown = index => {
    if (index < items.value.length - 1) {
      const item = items.value.splice(index, 1)[0]
      items.value.splice(index + 1, 0, item)
    }
  }
</script>

<style scoped>
  .container {
    position: relative;
    padding: 0;
    list-style-type: none;
  }

  .item {
    width: 100%;
    height: 80px;
    background-color: #f3f3f3;
    border: 1px solid #666;
    box-sizing: border-box;
  }

  .list-move,
  .list-enter-active,
  .list-leave-active {
    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  }
  .list-enter-from,
  .list-leave-to {
    opacity: 0;
    transform: scaleY(0.01) translate(30px, 0);
  }
  .list-leave-active {
    position: absolute;
  }
</style>