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

ldioqlga 于 2023-02-24 发布在 Vue.js

关注(0)|答案(1)|浏览(183)

我正在使用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>

vue.js

来源：https://stackoverflow.com/questions/75546262/how-can-i-make-the-child-menus-of-v-navigation-drawer-component-on-at-the-first

1条答案

按热度按时间

w3nuxt5m1#

要默认打开或通过任何操作打开，请使用列表组中的v-model:opened。只需执行以下步骤-
1.创建名为open的数据属性。
1.在列表元素上使用v-model:opened="open"。
1.将列表组与text属性绑定，如下所示:value="item.text"
1.由于列表组绑定了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>

赞(0）回复(0）举报 2023-02-24

我来回答

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

1条答案

相关问题

热门标签

最新问答