折叠所有列表并仅展开 vuetify 中的选定列表答案

【问题标题】：Collapse all list and expand only the selected list in vuetify折叠所有列表并仅展开 vuetify 中的选定列表
【发布时间】：2020-09-13 06:28:40
【问题描述】：

我有一个 v-list-group，里面有 2 个子组，如下图所示。每当我单击父列表组时，其他组都会折叠，但是当我单击列表组内的子组时，列表组内的其他子组不会折叠。例如：当我点击 Admin 时，Actions 子组没有被折叠。

codepen：https://codepen.io/eajithkumar128/pen/BaoEeqW?editable=true&editors=101%3Dhttps%3A%2F%2Fvuetifyjs.com%2Fen%2Fcomponents%2Flists%2F

<div id="app">
  <v-app id="inspire">
    <v-card
      class="mx-auto"
      width="300"
    >
      <v-list>


        <v-list-group
          prepend-icon="account_circle"
          value="false"
        >
          <template v-slot:activator>
            <v-list-item-title>Users</v-list-item-title>
          </template>

          <v-list-group
            no-action
            sub-group
            value="true"
          >
            <template v-slot:activator>
              <v-list-item-content>
                <v-list-item-title>Admin</v-list-item-title>
              </v-list-item-content>
            </template>

            <v-list-item
              v-for="(admin, i) in admins"
              :key="i"
              link
            >
              <v-list-item-title v-text="admin[0]"></v-list-item-title>
              <v-list-item-icon>
                <v-icon v-text="admin[1]"></v-icon>
              </v-list-item-icon>
            </v-list-item>
          </v-list-group>

          <v-list-group
            sub-group
            no-action
          >
            <template v-slot:activator>
              <v-list-item-content>
                <v-list-item-title>Actions</v-list-item-title>
              </v-list-item-content>
            </template>
            <v-list-item
              v-for="(crud, i) in cruds"
              :key="i"
              @click=""
            >
              <v-list-item-title v-text="crud[0]"></v-list-item-title>
              <v-list-item-action>
                <v-icon v-text="crud[1]"></v-icon>
              </v-list-item-action>
            </v-list-item>
          </v-list-group>
        </v-list-group>
       <v-list-group
          prepend-icon="account_circle"
          value="false"
        >
          <template v-slot:activator>
            <v-list-item-title>Users</v-list-item-title>
          </template>
        </v-list-group>
      </v-list>
    </v-card>
  </v-app>
</div>

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

这可以通过对每个 v-list-group 使用 v-model 来简单地完成。像这样的：

<v-list-group v-model="SubActive[header+subheader]" no-action sub-group v-for="(subheader, sIndex) in header.SubHeaderList" :key="sIndex" >
    <template v-slot:activator>
        <v-list-item-content v-on:click="subToggle(header,subheader)">
            <v-list-item-title>
                <span>{{subheader.Title}}</span>
            </v-list-item-title>
        </v-list-item-content>
    </template>

SubActive 是一个 Vue 数据对象，键为 header+subheader（用于唯一标识每个 subheader），所有 subheader 的初始值将设置为 false。

subToggle 函数将简单地将其余值切换为 false（将它们全部折叠，除了被点击的那个）：

subToggle(brand, category) {
             
    for (let i = 0; i < Object.keys(this.SubActive).length; i++) {
        if (brand + category != Object.keys(this.SubActive)[i]) {
            this.SubActive[Object.keys(this.SubActive)[i]] = false;
        }  
    }
},

【讨论】：