Vuetify Toolbar移动端无法折叠展开问题求助

嘿，我太懂你遇到的这个坑了——官方示例里的<v-toolbar-side-icon>只是个纯UI图标，根本没绑定任何菜单展开的逻辑，也没有对应的可折叠菜单组件，所以点击当然没反应啦！下面是具体的修复方案，直接就能用：

问题根源 #

Vuetify的v-toolbar-side-icon本身不具备展开菜单的功能，它只是一个触发按钮的样式。要实现移动端点击展开菜单，必须搭配可折叠的侧边栏组件，再用Vue的响应式数据来控制显示/隐藏状态。

修复后的完整代码 #

HTML模板 #

<div id="app">
  <v-app id="inspire">
    <!-- 移动端侧边栏，用v-model绑定显示状态 -->
    <v-navigation-drawer v-model="isDrawerOpen" temporary>
      <v-list>
        <v-list-item v-for="link in navLinks" :key="link">
          <v-list-item-title>{{ link }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <v-toolbar>
      <!-- 点击图标切换侧边栏状态 -->
      <v-toolbar-side-icon @click="isDrawerOpen = !isDrawerOpen"></v-toolbar-side-icon>
      <v-toolbar-title>Title</v-toolbar-title>
      <v-spacer></v-spacer>
      <!-- 桌面端显示的导航按钮，保持原示例不变 -->
      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn flat>Link One</v-btn>
        <v-btn flat>Link Two</v-btn>
        <v-btn flat>Link Three</v-btn>
      </v-toolbar-items>
    </v-toolbar>
  </v-app>
</div>

Vue实例代码 #

new Vue({
  el: '#app',
  data() {
    return {
      // 控制侧边栏的显示/隐藏，初始为关闭状态
      isDrawerOpen: false,
      // 侧边栏的导航链接，和桌面端保持一致
      navLinks: ['Link One', 'Link Two', 'Link Three']
    }
  }
})

关键修改说明 #

• 新增v-navigation-drawer组件：temporary属性让侧边栏在点击外部时自动关闭，非常适合移动端交互
• 添加响应式数据isDrawerOpen：用布尔值控制侧边栏的展开/收起状态
• 给v-toolbar-side-icon绑定@click事件：点击时切换isDrawerOpen的值，触发侧边栏的显示/隐藏
• 侧边栏用v-list渲染了和桌面端对应的导航链接，保证移动端和桌面端的导航体验一致

这样修改后，你再切到移动端视图点击菜单图标，就能正常展开侧边栏菜单啦！

内容的提问来源于stack exchange，提问作者tarek hassan