[Vuejs]-Vuetify extension panel impossible to expand one at a time

by

2👍

✅

All of 5 items are bind to first element of panel array, that’s why they are opening/closing together.

You need to bind v-model to different value:

<v-expansion-panel
     v-for="(item, i) in 5"
        :key="i"
      expand
      v-model="panel[i]">
    ....  
</v-expansion-panel>

and change data:

export default {
  data() {
    return {
      panel: [[true], [false], [false], [false], [true]]
    };
  }
};

Demo here

Or you can use v-expansion-panel-content as vuetify official example

👤ittus

0👍

I just want to help other people who can’t accept the approach from this thread because all v-expansion-panel adds dynamically and it’s hard to keep v-model of v-expansion-panels at the correct state.

I’m found out that v-expansion panel has beauty method .toggle() and it can help you in your problem probably!

👤Antay Juskovets

0👍

Currently you have to use the multiple attribute.

<v-expansion-panels 
 v-model="panel" 
 multiple
 >

    <v-expansion-panel 
     v-for="(item,index) in items" 
     :key="index"
  >

Your panel array includes the index of each OPEN item. The array order does not matter. So if you had five items and wanted the first and third panels opened, you could do this:

this.panel = [0,2];
👤mintedsky

Leave a comment