[Vuejs]-How can I make the child menus of v-navigation-drawer component on at the first project run?

by

0👍

✅

Try this method:

 mounted() {
    this.$nextTick(() => {
        const groupElements = document.querySelectorAll(".v-list-group");
        for (let i = 0; i < groupElements.length; i++) {
            const group = groupElements[i];
            const content = group.querySelector(".v-list-group__items");
            if (content) {
                group.classList.add("v-list-group--active");
                content.style.display = "block";
            }
        }     
    });
},

0👍

To either open by default or open with any action, use v-model:opened on the list group. Just follow the below steps-

  1. Create a data property named open.
  2. Use v-model:opened="open" on your list element.
  3. Bind list group with the text property, like this :value="item.text"
  4. As list group is bonded with the text property, so assign the desired item’s text property value to the open data property, i.e. open: ['Parent Menu']

Here is a working demo-

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>

Leave a comment