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

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

在我的情况下，0和1将被预先打开。

Vuetify扩展面板默认保持打开状态

1 个答案: