Vue2中Vuetify导航抽屉点击菜单项意外展开的解决方法

问题核心：Vuetify的v-navigation-drawer在mini-variant模式下，默认会监听抽屉内的点击事件来切换展开状态。当点击带有link属性的列表项时，事件会冒泡到抽屉组件，导致抽屉意外展开。

解决方案 #

给每个列表项添加@click.stop指令，阻止事件冒泡到导航抽屉，从而避免触发自动展开行为。

修改后的列表项代码片段：

<v-list dense>
  <v-list-item
    v-for="item in items"
    :key="item.title"
    link
    @click.stop
  >
    <v-list-item-icon>
      <v-icon>{{ item.icon }}</v-icon>
    </v-list-item-icon>

    <v-list-item-content>
      <v-list-item-title>{{ item.title }}</v-list-item-title>
    </v-list-item-content>
  </v-list-item>
</v-list>

如果需要为列表项添加自定义点击逻辑，只需在@click.stop后绑定处理函数即可，示例：

@click.stop="handleItemClick(item)"

完整修改代码 #

JavaScript 部分

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      drawer: true,
      items: [
        { title: 'Home', icon: 'mdi-home-city' },
        { title: 'My Account', icon: 'mdi-account' },
        { title: 'Users', icon: 'mdi-account-group-outline' },
      ],
      mini: true,
    }
  },
  methods: {
    handleItemClick(item) {
      // 自定义点击逻辑，例如跳转页面、触发弹窗等
      console.log('点击菜单:', item.title)
    }
  }
})

HTML 部分

<div id="app">
  <v-app id="inspire">
    <v-card>
      <v-navigation-drawer
        v-model="drawer"
        :mini-variant.sync="mini"
        permanent
      >
        <v-list-item class="px-2">
          <v-list-item-avatar>
            <v-img src="https://randomuser.me/api/portraits/men/85.jpg"></v-img>
          </v-list-item-avatar>

          <v-list-item-title>John Leider</v-list-item-title>

          <v-btn
            icon
            @click.stop="mini = !mini"
          >
            <v-icon>mdi-chevron-left</v-icon>
          </v-btn>
        </v-list-item>
        
         <div
        :style="{ display: mini ? 'block' : 'none' ,paddingLeft: '20px', paddingTop: '5px', paddingBottom: '5px' }"
      >
        <v-icon
          @click="mini = !mini"
        > mdi-chevron-right </v-icon>
      </div>

        <v-divider></v-divider>

        <v-list dense>
          <v-list-item
            v-for="item in items"
            :key="item.title"
            link
            @click.stop="handleItemClick(item)"
          >
            <v-list-item-icon>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-item-icon>

            <v-list-item-content>
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
    </v-card>
  </v-app>
</div>

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