How to open a v-list-group
by default?
I tried value
as it says in the documentation:
So this is my simplified Vuetify 3 (3.3.14) code using value
trying to expand the v-list-group
by default:
<v-list>
<v-list-group :value="isOpen1">
<template v-slot:activator="{ props }">
<v-list-item/>
</template>
<v-list-item/>
</v-list-group>
<v-list-group :value="isOpen2">
<template v-slot:activator="{ props }">
<v-list-item/>
</template>
<v-list-item/>
</v-list-group>
</v-list>
...
export default {
data() {
return {
isOpen1: true,
isOpen2: true
}
}
}
But now it is closed by default and when I open (expand) either of the two v-list-group
items, both are opened.
The value
prop on the v-list-group sets an identifier for the group. Using the opened
prop on the surrounding list, you can pass in an array with group identifiers to indicate which groups are opened:
<v-list v-model:opened="openedGroups">
<v-list-group value="group1">
...
</v-list-group>
<v-list-group value="group2">
...
</v-list-group>
</v-list>
and
export default {
data() {
return {
openedGroups: ['group1']
}
}
}
Have a look at the example from the documentation