Vuetify 2->3 replacing removed v-list-item-content / v-list-item-group

sd2nnvve 于 2023-05-18 发布在 Vue.js

关注(0)|答案(1)|浏览(170)

我正在尝试从Vuetify/Vue 2->3升级。我不是一个前端开发人员，只是负责升级一些遗留代码以保持功能。不幸的是，migration guide似乎假设了一个基本的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的注解谈到了 * 多个 * 东西，没有例子！
任何帮助将不胜感激。谢谢大家！
（我最初问这个here，有人建议我把它分成多个问题）

vue.js

来源：https://stackoverflow.com/questions/76232385/vuetify-2-3-replacing-removed-v-list-item-content-v-list-item-group

1条答案

按热度按时间

ctzwtxfj1#

迁移指南可以改进！希望这能帮助…
v-list-item-content已被删除，列表现在使用CSS网格进行布局。
如果查看版本3下的输出，您将看到该元素存在.v-list-item__content以及相关的网格样式，因此您不再需要添加此元素来实现相同的功能。
v-list-item-group已被删除，只需为列表项添加值使其可选择，并在v-list上绑定v-model：selected即可获得所选值。
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

赞(0）回复(0）举报 2023-05-18

我来回答

Vuetify 2->3 replacing removed v-list-item-content / v-list-item-group

1条答案

相关问题

热门标签

最新问答