How to expand v-expansion-panel by default with vue/vuetify?

Question

I'd like to have an expansion panel <v-expansion-panel> open by default on page load, but cannot figure it out. I know for Angular, you put [expanded]="true", but this doesn't work with Vue. I haven't had luck anywhere finding this answer. I'm not sure if javascript is needed or not, or if it can be done right within the <v-expansion-panel> tag.

I tried <v-expansion-panel [expanded]="true" and it did show the buttons that are in that section, but that's it.

<section>
   <v-app>
      <v-expansion-panel
         v-model="search"
         expand
      >
.
.
.
   </v-app>
</section>

Solution 1

Watch the PROPS section on the documentation:

https://vuetifyjs.com/en/components/expansion-panels#expansion-panel

The expand prop says: Leaves the expansion-panel open while selecting another.

This is not what you want.

You need to use value prop: Controls the opened/closed state of content in the expansion-panel. Corresponds to a zero-based index of the currently opened content. If expand prop is used then it is an array of Booleans where the index corresponds to the index of the content.

So, in your case:

<section>
 <v-app>
  <v-expansion-panel
     v-model="search"
     :value="0"
  >
  .
  .
  .
  </v-app>
</section>

Where "0" is the index of the expansion panel expanded by default.

I made an example here:

https://codepen.io/anon/pen/pmqyOP?&editable=true&editors=101#anon-login

Solution 2

It works for me use:

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

panel: [], // default 
panel: [0, 1, 2, 3], // open items 1 to 4  

If you want to return all the items by default or use a function to expand all:

this.panel = Array.from(Array(this.dataReturned.length).keys());

https://vuetifyjs.com/en/components/expansion-panels/#model

Comments

[ziggybrew]

This didn't do the trick for me. What ended up working was setting the object to true,true,true like this --> search: [true, true, true]

[MushyPeas]

:value="0" does it