导航抽屉意外打开

Question

我是 Vue 2 的新手，试图弄清楚为什么导航抽屉会这样。以下代码笔包含一个小导航。可以使用 V 形图标打开和关闭。这是工作正常。

不幸的是，如果用户单击某个项目，抽屉也会打开，这是我绝对不想要的。用户应该决定是否仅扩展导航栏或最小化导航栏。

我怎样才能防止这种行为？

https://codepen.io/icoded/pen/qBwLqxp?editors=1010

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,
    }
  },
})

<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
          >
            <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>

VG

Answer 1

更改 v-navigation-drawer 以在列表项尝试更新时将

mini

保留为

true

。

<v-navigation-drawer
  v-model="drawer"
  :mini-variant.sync="mini"
  permanent
  @update:mini-variant="mini = true"
>

雪佛龙打开/关闭仍然可以正常工作。