CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuetify.js
Tarvo Mäesepp
Tarvo Mäesepp

Reputation: 4533

Vuetify extension panel impossible to expand one at a time

I am trying to use Vuetify's extension panel, however I am unable to expand only one at a time when looping the v-expansion-panel. Why it is expanding all expansions? The only thing I am doing differently from documentation is that I loop v-expansion-panel instead of v-expansion-panel-content. For me it seems that it takes the first element from the array and uses it as state.

The thing I am trying to achieve is that I want to know which of them is opened, but I do not know how to achieve it without v-model.

This is the codesandbox I made. Any help is appreciated.

Upvotes: 0

Views: 4943

Answers (3)

mintedsky
mintedsky

Reputation: 1103

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];

Upvotes: 0

Antay Juskovets
Antay Juskovets

Reputation: 1

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!

Upvotes: 0

ittus
ittus

Reputation: 22393

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

Upvotes: 2

Related Questions