Vuetify - How to keep the first expansion panel open by default and if I open another panel, the others should be close?

user_10268122 0
Viewed 20413

Basically, the thing is I have 4 expansion panel and I want the first panel should be open or expanded by default and when I click on the second panel the first one should be close.

In vuetify doc they have both the eg. one for how to by default open the panel and second is, when one should open others should be closed. 

<template>
  <div>
 <div class="text-xs-center mb-3">{{ panel }}</div>    
 <v-expansion-panel
  expand
  v-model="panel">
  <v-expansion-panel-content
    v-for="(details,index) in marketCapDetails"
    :key="index">
    <template v-slot:header>
       <p>{{details.sr_no }}</p>
       <p>{{details.currency }}</p>
    </template>
    <v-card>
      #some code
    </v-card>      
  </v-expansion-panel-content>
</v-expansion-panel>


and in my script

export default {   
  data() {
    return {
            panel:[true, false, false, false]
         }   
      }
}
vuetify.js vue.js
4 Answers

Use v-model="panel" which is equal arrays of indexes of expanded items

<v-expansion-panels v-model="panel"
 <v-expansion-panel
  expand
  v-model="panel">
  <v-expansion-panel-content
    v-for="(details,index) in marketCapDetails"
    :key="index">
    <template v-slot:header>
       <p>{{details.sr_no }}</p>
       <p>{{details.currency }}</p>
    </template>
    <v-card>
      #some code
    </v-card>      
  </v-expansion-panel-content>
 </v-expansion-panel>
</v-expansion-panels>

data() {
 return {
   panel: [0]
 }
}

The value prop takes a number when you're not using expand.

From the docs:

Corresponds to a zero-based index of the currently opened content.

user_11849320

In the meanwhile there have been breaking changes:

If you have 4 panels and the first and the third should be open:

panel: [0, 2]

Without the multiple prop its only the index of the panel and not an array:

panel: 0

(first panel open)

user_26894550

if you just want the first item to be open by default use the 'mandatory' prop

user_50521960

You can also set the :value attribute on the expansion panels. This attribute can also help if you are only using one expansion panel.

Example:

  <v-expansion-panels :value="opened">
   <v-expansion-panel>
      <v-expansion-panel-header>
        Incomes and Expenses monthly
      </v-expansion-panel-header>
      <v-expansion-panel-content>
      ...
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-expansion-panels>

...

data() {
return {
  opened: 0,
}

},

According with : https://vuetifyjs.com/en/api/v-expansion-panels/#props-value

user_118436060
Related