How can I manage separate open states for Vuetify v-expansion-panels inside a v-for loop?

The issue is that all your expansion panels are sharing the same v-model (expanded), which means they use the same reactive variable for their state. To have each set (each loop iteration) manage its own expansion state, you need to bind each v-expansion-panels to its own model.

One common solution is to create an array (or object) that maps to each iteration’s state. For example, if you want only the first expansion panel (of the first table) open by default (with index 0), you can create an array (panels) that holds the state for each table.

Below is an example using the Composition API:

VUECopied
<template>
  <div v-for="(table, index) in tables" :key="index">
    <v-select></v-select>
    <v-expansion-panels
      v-model="panels[index]"
      :readonly="readonly"
      multiple
    >
      <v-expansion-panel>
        <v-expansion-panel-title>Panel 1</v-expansion-panel-title>
        <v-expansion-panel-text>
          Some content
        </v-expansion-panel-text>
      </v-expansion-panel>

      <v-expansion-panel>
        <v-expansion-panel-title>Panel 2</v-expansion-panel-title>
        <v-expansion-panel-text>
          Some content
        </v-expansion-panel-text>
      </v-expansion-panel>
    </v-expansion-panels>
  </div>
</template>

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

// Example table data; replace with your actual data
const tables = ref([{ id: 1 }, { id: 2 }, { id: 3 }])

// Create an array of expansion states, one per table instance.
// For example, only the first table's first panel is open by default.
const panels = ref(tables.value.map((_, index) => {
  return index === 0 ? [0] : [] // Only first table open first panel
}))

const readonly = ref(false)
</script>

Explanation

• Instead of using a single "expanded" variable, we use an array called panels.
• Each entry in panels corresponds to the state of the v-expansion-panels for that table.
• In this example, we initialize the state so that only the first table (index 0) has its first panel (index 0) open by default and all other tables have an empty array (no open panels).
• Binding v-model to panels[index] ensures each expansion panel instance manages its own expanded state.

This approach separates the state between each v-expansion-panels instance, so expanding a panel in one table won’t affect the others.