如何在第一次项目运行时打开 v-navigation-drawer 组件的子菜单？

Question

我正在使用 Vue 3 和 Vuetify 3 制作一个 v-navigation-drawer 组件。

v-navigation-drawer 运行良好，但我希望子菜单在没有用户单击和项目首次运行时默认显示。我正在使用 v-slot:activator 来显示子菜单。当项目运行时，用户应该看到带有子菜单项的v-navigation-drawer。

这是我的代码-

<template>
  <v-navigation-drawer v-model="drawer" width="325">
    <v-list :lines="false" density="compact" nav >
      <v-list-group v-for="(item, i) in items" :key="i" :value="item" >
        <template  v-slot:activator="{ props }">
          <v-list-item v-bind="props" :prepend-icon="item.icon" :title="item.text" active-color="orange-darken-1"
            rounded="xl" ></v-list-item>
        </template>
        <v-list-item-title v-for="itemdetail in item.subItem" :key="itemdetail.id" :value="itemdetail" >
          <template v-if="itemdetail">
            <v-list-item :prepend-icon="itemdetail.icon" :title="itemdetail.text"
              active-color="teal-darken-1" rounded="xl">
            </v-list-item>
          </template>
        </v-list-item-title>
      </v-list-group>
    </v-list>
  </v-navigation-drawer>
</template>
<script>
export default {
  data: () => ({
    drawer: true,
    items: [{
      text: 'Parent Menu',
      icon: 'mdi-pier-crane',
      subItem: [{
          text: 'Child Menu 1',
          icon: 'mdi-engine'
        },
        {
          text: 'Child Menu 2',
          icon: 'mdi-calculator-variant'
        },
        {
          text: 'Child Menu 3',
          icon: 'mdi-list-status'
        },
        {
          text: 'Child Menu 4',
          icon: 'mdi-calendar-edit'
        },
      ]
    }, ],
  }),
}
</script>

Answer 1

要默认打开或使用任何操作打开，请在列表组中使用v-model:opened。只需按照以下步骤操作 -

1. 创建名为open 的数据属性。
2. 在您的列表元素上使用v-model:opened="open"。
3. 使用text属性绑定列表组，像这样:value="item.text"
4. 由于列表组与text属性绑定，因此将所需项目的text属性值分配给open数据属性，即open: ['Parent Menu']

   这是一个工作演示-

   const { createApp } = Vue
   const { createVuetify } = Vuetify
   const vuetify = createVuetify()
   
   const app = createApp({
     data: () => ({
       drawer: true,
       open: ['Parent Menu'],
       items: [{
         text: 'Parent Menu',
         icon: 'mdi-pier-crane',
         subItem: [{
             text: 'Child Menu 1',
             icon: 'mdi-engine'
           },
           {
             text: 'Child Menu 2',
             icon: 'mdi-calculator-variant'
           },
           {
             text: 'Child Menu 3',
             icon: 'mdi-list-status'
           },
           {
             text: 'Child Menu 4',
             icon: 'mdi-calendar-edit'
           },
         ]
       }, ],
     }),
   }).use(vuetify).mount('#app')

   <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.2/dist/vuetify.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.2/dist/vuetify.min.css">
   <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
   <div id="app">
     <v-app>
       <v-card
         class="mx-auto"
         width="300"
         >
         <v-list v-model:opened="open">
           <v-list-item prepend-icon="mdi-home" title="Home"></v-list-item>
           <v-list-group v-for="(item, i) in items" :key="i" :value="item.text" >
             <template  v-slot:activator="{ props }">
               <v-list-item v-bind="props" :prepend-icon="item.icon" :title="item.text" active-color="orange-darken-1"
                 rounded="xl" ></v-list-item>
             </template>
             <v-list-item-title v-for="itemdetail in item.subItem" :key="itemdetail.id" :value="itemdetail.text" >
               <v-list-item :prepend-icon="itemdetail.icon" :title="itemdetail.text"
                 active-color="teal-darken-1" rounded="xl">
               </v-list-item>
             </v-list-item-title>
           </v-list-group>
         </v-list>
       </v-card>
     </v-app>
   </div>