单击列表项时 v-list 关闭组

Question

我的项目中有这个 v-navigation 抽屉。它包含 v-list-items 和 v-list-group。当单击一个 v-list-item 并且 v-list-group 展开时，我希望该组被折叠。如何做到这一点？

<v-app id="t">
  <v-navigation-drawer dark v-model="sidebar" app>
    <v-list>
      <v-list-item router-link to='/Test'>
        <v-list-item-title>Test</v-list-item-title>
      </v-list-item>
      <v-list-item router-link to='/Test2'>
        <v-list-item-title>Test2</v-list-item-title>
      </v-list-item>
      <v-list-group :value="true">
        <template v-slot:activator>
          <v-list-item-title>Title</v-list-item-title>
        </template>
        <v-list-item
          v-for="item in mobAdminItems"
          :key="item.title"
          :to="item.linkTo"
        >
          <v-list-item-content>
            <v-list-item-title v-text="item.title"></v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-group>
      <v-list-item router-link to='/Test3'>
        <v-list-item-title>Test3</v-list-item-title>
      </v-list-item>
      <v-list-item router-link to='/Test4'>
        <v-list-item-title>Test4</v-list-item-title>
      </v-list-item>

    </v-list>
  </v-navigation-drawer>
</v-app>

Answer 1

您可以将 v-model 添加到 v-list-group 组件并将其分配给某个变量。更改此变量将导致展开/折叠操作。

<v-list-group v-model="groupOpened">
  <template v-slot:activator>
    <v-list-item-title>Title</v-list-item-title>
  </template>
  <v-list-item
    v-for="item in mobAdminItems"
    ...
    @click="groupOpened = false"
  >
    <v-list-item-content>
      <v-list-item-title v-text="item.title"></v-list-item-title>
    </v-list-item-content>
  </v-list-item>
</v-list-group>
...
data () {
  return {
    ...
    groupOpened: false,
  }
}

测试这个 at CodePen。

单击列表项时 v-list 关闭组

v-list close group when list-item is clicked

vue.js

vue-router

vuetify.js