Java OpenResty Spring Spring Boot MySQL Redis MongoDB PostgreSQL Linux Android Nginx 面试 小程序 Arthas JVM AQS juc Kubernetes Docker 诊断工具


Vuetify 3 v-list-group 无法展开和收缩

Vuetify Vue 大约 1882 字

问题

在侧边菜单栏v-navigation-drawer中使用v-list,以及v-list-group构建二级菜单,实现菜单分类。

但是v-list-group下的条目无法展开和收缩,或者收缩之后无法再展开。

代码

template 代码

<template>
  <v-layout class="rounded rounded-md">
    <v-navigation-drawer v-model="drawer">
      <v-list nav :opened="open">
        <v-list-group value="菜单一">
          <template v-slot:activator="{ props }">
            <v-list-item
              v-bind="props"
              title="菜单一"
            ></v-list-item>
          </template>
          <v-list-item title="菜单一分类一" value="菜单一分类一" to="/m1-c1"></v-list-item>
          <v-list-item title="菜单一分类二" value="菜单一分类二" to="/m1-c2"></v-list-item>
        </v-list-group>
        <v-list-group value="菜单二">
          <template v-slot:activator="{ props }">
            <v-list-item
              v-bind="props"
              title="菜单二"
            ></v-list-item>
          </template>
          <v-list-item title="菜单二分类一" value="菜单二分类一" to="/m2-c1"></v-list-item>
          <v-list-item title="菜单二分类二" value="菜单二分类二" to="/m2-c2"></v-list-item>
        </v-list-group>
      </v-list>
    </v-navigation-drawer>
  </v-layout>
</template>

script 代码

<script setup>
import {ref} from "vue";

const drawer = ref(true)

const open = ref([])
</script>

问题排查

Vuetify官方文档上是可以正常使用,猜想是不是新版本引入了Bug

问题版本

Vuetify 3.5.3,发版时间是2024-02-08,截止发文时,刚发布不久。

尝试解决

Vuetify回退到3.4.17版本,发现还是存在问题。

再次排查

官方文档有专门的在线代码调试,进入后发现也能正常展开和收缩。

无意间发现右上角显示了版本号:Vue 3.4.7Vuetify 3.5.3

马上看了下当前工程的Vue版本,是3.4.17

回退 Vue 版本

查看package.json中申明的版本信息。

初始化时版本

实际拉取下来的Vue版本为3.4.17

{
  "dependencies": {
    "vue": "^3.3.0",
    "vuetify": "^3.0.0"
  },
}

回退版本

选择了指定版本:Vue 3.4.7Vuetify 3.5.3

问题解决!

{
  "dependencies": {
    "vue": "3.4.7",
    "vuetify": "3.5.3"
  },
}
阅读 57 · 发布于 2024-02-13

————        END        ————

Give me a Star, Thanks:)

https://github.com/fendoudebb

扫描下方二维码关注公众号和小程序↓↓↓

扫描二维码关注我
昵称:
随便看看 换一批