Vuetify 2->3 替换已删除的 v-list-item-content / v-list-item-group

Question

我正在尝试从 Vuetify/Vue 2->3 升级。我不是前端开发人员，只是负责升级一些遗留代码以保持功能正常运行。不幸的是，迁移指南似乎假设了一定程度的基线CSS知识，并且没有提供如何修复所有被删除的内容的示例。

我正在努力解决的一件事是替换此代码块中已弃用的

v-list-item-content

/

v-list-item-group

：

    <v-navigation-drawer :rail="mini" permanent clipped app width="200">
      <v-list density="compact">
        <v-list-item-group v-model="selected">
          <v-list-item
            v-for="item in items"
            :key="item.title"
            link
            :disabled="item.disabled"
            :icon="item.icon || null"
          >
            <v-list-item-content>
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>

迁移指南只是说：

v-list-item-content 已被删除，列表现在使用 CSS 网格进行布局。

和

v-list-item-group 已被删除，只需为列表项添加值以使其可选择，并在 v-list 上绑定 v-model:selected 即可获取所选值。

我不知道“使用 CSS 网格进行布局”是什么意思，而且由于我不了解 CSS，所以我陷入了困境。关于 v-list-item-group 的注释讨论了 multiple 事物，但没有示例！

如有任何帮助，我们将不胜感激。谢谢！

（我最初在这里问过这个问题，有人建议我将其分成多个问题）

Answer 1

迁移指南还有待改进！希望这会有所帮助...

v-list-item-content 已被删除，列表使用 CSS 网格进行布局 现在改为。

如果您查看版本 3 下的输出，您将看到该元素存在

.v-list-item__content

并具有关联的网格样式，因此您不再需要添加它来实现相同的效果。

v-list-item-group 已被删除，只需为列表项添加值即可 使它们可选择并绑定 v-model:selected on v-list 以获取 选择的值。

Add value to list items to make them selectable

.

<v-list :items="items"></v-list>

Bind v-model:selected on v-list to get the selected value

.

这不起作用，但是会发出事件，因此如果您需要该值，可以通过以下方式获取它：

<v-list
  :items="items" 
  @update:selected="selected" // <<< Listen for event
/>

示例： Codepen

Answer 2

所以如果你的 vuetify 2 中有类似的东西

<v-list-item>
  <v-list-item-content>
    <v-list-item-title>Title here</v-list-item-title>
    <v-list-item-subtitle>Subtitle here</v-list-item-subtitle>
  </v-list-item-content>
</v-list-item>

将其替换为 vuetify 3 中的

<v-list-item>
  <v-list-item-title>Title here</v-list-item-title>
  <v-list-item-subtitle>Subtitle here</v-list-item-subtitle>
</v-list-item>