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

huangapple
go评论64阅读模式
英文:

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

问题

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

I am making a v-navigation-drawer component using Vue 3 and Vuetify 3.

The v-navigation-drawer works well but I want the child menus to show by default without the user's click and when the project first runs. I am using v-slot:activator for the child menus display. When the project runs, the user should see the v-navigation-drawer with child menu items.

Here is my code-

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

答案1

得分: 0

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

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

这是一个可工作的演示-

<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
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')

<!-- language: lang-html -->
<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>



<details>
<summary>英文:</summary>
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`.
1. Use `v-model:opened=&quot;open&quot;` on your list element.
1. Bind list group with the `text` property, like this `:value=&quot;item.text&quot;` 
1. As list group is bonded with the `text` property, so assign the desired item&#39;s `text` property value to the `open` data property, i.e. `open: [&#39;Parent Menu&#39;]`
Here is a working demo-
&lt;!-- begin snippet: js hide: false console: false babel: false --&gt;
&lt;!-- language: lang-js --&gt;
const { createApp } = Vue
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = createApp({
data: () =&gt; ({
drawer: true,
open: [&#39;Parent Menu&#39;],
items: [{
text: &#39;Parent Menu&#39;,
icon: &#39;mdi-pier-crane&#39;,
subItem: [{
text: &#39;Child Menu 1&#39;,
icon: &#39;mdi-engine&#39;
},
{
text: &#39;Child Menu 2&#39;,
icon: &#39;mdi-calculator-variant&#39;
},
{
text: &#39;Child Menu 3&#39;,
icon: &#39;mdi-list-status&#39;
},
{
text: &#39;Child Menu 4&#39;,
icon: &#39;mdi-calendar-edit&#39;
},
]
}, ],
}),
}).use(vuetify).mount(&#39;#app&#39;)
&lt;!-- language: lang-html --&gt;
&lt;script src=&quot;https://unpkg.com/vue@3/dist/vue.global.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vuetify@3.1.2/dist/vuetify.min.js&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/vuetify@3.1.2/dist/vuetify.min.css&quot;&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;div id=&quot;app&quot;&gt;
&lt;v-app&gt;
&lt;v-card
class=&quot;mx-auto&quot;
width=&quot;300&quot;
&gt;
&lt;v-list v-model:opened=&quot;open&quot;&gt;
&lt;v-list-item prepend-icon=&quot;mdi-home&quot; title=&quot;Home&quot;&gt;&lt;/v-list-item&gt;
&lt;v-list-group v-for=&quot;(item, i) in items&quot; :key=&quot;i&quot; :value=&quot;item.text&quot; &gt;
&lt;template  v-slot:activator=&quot;{ props }&quot;&gt;
&lt;v-list-item v-bind=&quot;props&quot; :prepend-icon=&quot;item.icon&quot; :title=&quot;item.text&quot; active-color=&quot;orange-darken-1&quot;
rounded=&quot;xl&quot; &gt;&lt;/v-list-item&gt;
&lt;/template&gt;
&lt;v-list-item-title v-for=&quot;itemdetail in item.subItem&quot; :key=&quot;itemdetail.id&quot; :value=&quot;itemdetail.text&quot; &gt;
&lt;v-list-item :prepend-icon=&quot;itemdetail.icon&quot; :title=&quot;itemdetail.text&quot;
active-color=&quot;teal-darken-1&quot; rounded=&quot;xl&quot;&gt;
&lt;/v-list-item&gt;
&lt;/v-list-item-title&gt;
&lt;/v-list-group&gt;
&lt;/v-list&gt;
&lt;/v-card&gt;
&lt;/v-app&gt;
&lt;/div&gt;
&lt;!-- end snippet --&gt;
</details>
# 答案2
**得分**: 0
尝试这个方法：
```javascript
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";
}
}     
});
},
英文:

Try this method:

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

huangapple
  • 本文由 发表于 2023年2月23日 22:35:49
  • 转载请务必保留本文链接：https://go.coder-hub.com/75546262.html
  • javascript
  • vue.js
  • vuejs3
  • vuetify.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定