Javascript 默认情况下,保持Vuetify扩展面板处于打开状态
我使用的是vuetify扩展面板组件,我希望它们在默认情况下处于打开状态,我使用的是Javascript 默认情况下,保持Vuetify扩展面板处于打开状态,javascript,html,vue.js,vuetify.js,Javascript,Html,Vue.js,Vuetify.js,我使用的是vuetify扩展面板组件,我希望它们在默认情况下处于打开状态,我使用的是panel:[0],在某些情况下可以正常工作,但在某些情况下,例如,当我更改站点中的语言时,第一个面板关闭,重新加载后会恢复正常。有什么想法会影响它吗 <v-expansion-panels v-model="panel" multiple focusable> <h1 class="page-title">{{maindata.name}}</h1> <
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>
{{maindata.name}
{{item.cititle}
{{maindata.name}
{{item.cititle}
好了:
<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>
“扩展”数组应包含加载组件时要打开的扩展面板的ID
在我的例子中,0和1将被预先打开。奇怪的是,您应该尝试提供一个复制此行为的最小代码。我建议您隔离组件。您也可以尝试使用
:value=“panel”
而不是v-model=“panel”
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...',
},
],