I'm using vuetify expansion panels ponent, and I want them to be open by default and I'm using panel: [0] which works fine in some cases but in some cases for example when I change the language in my site, the first panel closes, on reload it goes back to normal. Any ideas what could be affecting it?

<v-expansion-panels v-model="panel" multiple focusable>
    <h1 class="page-title">{{maindata.name}}</h1>
     <v-expansion-panel v-for="(item, ind) in tablesdata" :key="item.cid" :index="ind">
        <v-expansion-panel-header>{{item.cititle}}</v-expansion-panel-header>
         <v-expansion-panel-content class="content">
            <v-card class="mx-auto" flat>
                <v-list-item>
                    <v-list-item-content>
                        <div class="overline">{{maindata.name}}</div>
                        <v-card-text class="news-title mb-1">{{item.cititle}}</v-card-text>
                        <v-card-text class="card-t" >
                            <div v-html="item.fc"></div>
                        </v-card-text>
                    </v-list-item-content>
                </v-list-item>
            </v-card>
        </v-expansion-panel-content>
    </v-expansion-panel>
</v-expansion-panels>

I'm using vuetify expansion panels ponent, and I want them to be open by default and I'm using panel: [0] which works fine in some cases but in some cases for example when I change the language in my site, the first panel closes, on reload it goes back to normal. Any ideas what could be affecting it?

<v-expansion-panels v-model="panel" multiple focusable>
    <h1 class="page-title">{{maindata.name}}</h1>
     <v-expansion-panel v-for="(item, ind) in tablesdata" :key="item.cid" :index="ind">
        <v-expansion-panel-header>{{item.cititle}}</v-expansion-panel-header>
         <v-expansion-panel-content class="content">
            <v-card class="mx-auto" flat>
                <v-list-item>
                    <v-list-item-content>
                        <div class="overline">{{maindata.name}}</div>
                        <v-card-text class="news-title mb-1">{{item.cititle}}</v-card-text>
                        <v-card-text class="card-t" >
                            <div v-html="item.fc"></div>
                        </v-card-text>
                    </v-list-item-content>
                </v-list-item>
            </v-card>
        </v-expansion-panel-content>
    </v-expansion-panel>
</v-expansion-panels>

• javascript
• html
• vue.js
• vuetify.js

Share Improve this question Follow asked Apr 19, 2020 at 19:06 coder_in_distresscoder_in_distress 2311 silver badge77 bronze badges 1

• 1 Weird, you should try to provide a minimal code that reproduces this behavior. I suggest you to isolate ponents. You can try also to use :value="panel" instead of v-model="panel" – yuri Commented Apr 19, 2020 at 20:05

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

There you go:

    <v-expansion-panels multiple accordion  :value="expanded">
        <v-expansion-panel v-for="(item,i) in news" :key="i">
            <v-expansion-panel-header>{{item.title}}</v-expansion-panel-header>
            <v-expansion-panel-content>
                {{item.content}}
            </v-expansion-panel-content>
        </v-expansion-panel>
    </v-expansion-panels>

and in the script tag:

    export default {
    name: "WhatsNew",
    data() {
        return {
            expanded: [0, 1],
            news: [
                {
                    title: "news 1 title",
                    content: 'Lorem ipsum...',
                },
                {
                    title: "news 2 title",
                    content: 'Lorem ipsum dolor s...',
                },
            ],

the 'expansion' array should contain the ids of the expansion panels you want to be open when ponent is loaded.

in my case, 0 and 1 will be pre opened.