How do you collapse all groups in Vuetify 3?

To collapse all groups in Vuetify 3, you typically need to manage the state of the groups programmatically. Vuetify's v-expansion-panels component doesn't have a built-in method to collapse all groups at once. Instead, you'll need to iterate through the groups and set their model values to false.

Here's a breakdown of how you can achieve this:

1. Using `v-model` with an Array:

- The most common approach is to use an array as the v-model for your v-expansion-panels. Each element in the array corresponds to the open/closed state of a group. When an element is true, the group is open; when false, it's closed.

2. Creating a Method to Collapse All:

- You'll create a method that iterates through this array and sets all elements to false. This will effectively collapse all groups.

3. Example Code:

<template>
  <v-expansion-panels v-model="panelState">
    <v-expansion-panel v-for="(item, index) in items" :key="index">
      <v-expansion-panel-title></v-expansion-panel-title>
      <v-expansion-panel-text></v-expansion-panel-text>
    </v-expansion-panel>
  </v-expansion-panels>
  <v-btn @click="collapseAll">Collapse All</v-btn>
</template>

<script setup>
  import { ref } from 'vue';

  const items = ref([
    { title: 'Group 1', content: 'Content for Group 1' },
    { title: 'Group 2', content: 'Content for Group 2' },
    { title: 'Group 3', content: 'Content for Group 3' },
  ]);

  const panelState = ref(items.value.map(() => false));

  const collapseAll = () => {
    panelState.value = panelState.value.map(() => false);
  };
</script>

4. Explanation:

- The panelState ref is initialized with an array of false values, matching the number of groups. This ensures all groups are initially closed.

- The collapseAll method updates the panelState ref by mapping each element to false, causing all groups to collapse.

5. Alternative Approach (Using a Single Boolean):

- If you want to control all groups with a single boolean, you can use a computed property to derive the array of open/closed states based on that boolean.

By using these methods, you can effectively collapse all groups in your Vuetify 3 application, providing a better user experience when dealing with multiple expandable sections.

Learn more about this