默认情况下保持 Vuetify 扩展面板打开

Question

我正在使用 vuetify 扩展面板组件，我希望它们默认打开，并且我使用的panel: [0]在某些情况下工作正常，但在某些情况下，例如当我更改网站中的语言时，第一个面板会关闭重新加载就恢复正常了。有什么想法可能会影响它吗？

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

Answer 1

就这样：

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

并在脚本标签中：

    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...',
                },
            ],

“expansion”数组应包含加载组件时要打开的扩展面板的 ID。

就我而言，0 和 1 将被预先打开。