Vuetify - 如何让第一个扩展面板默认打开，如果我打开另一个面板，其他面板应该关闭？

Question

基本上，问题是我有 4 个扩展面板，我希望第一个面板默认打开或展开，当我单击第二个面板时，第一个面板应该关闭。

在 vuetify doc 中，他们同时拥有 eg。一是如何默认打开面板，二是什么时候应该打开其他面板应该关闭。

 <template>
  <div>
 <div class="text-xs-center mb-3">{{ panel }}</div>
 <v-expansion-panel
  expand
  v-model="panel">
  <v-expansion-panel-content
    v-for="(details,index) in marketCapDetails"
    :key="index">
    <template v-slot:header>
       <p>{{details.sr_no }}</p>
       <p>{{details.currency }}</p>
    </template>
    <v-card>
      #some code
    </v-card>
  </v-expansion-panel-content>
</v-expansion-panel>

在我的脚本中

export default {
  data() {
    return {
            panel:[true, false, false, false]
         }
      }
}

原文由 shashi verma 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 v-model="panel" 这是扩展项目索引的相等数组

<v-expansion-panels v-model="panel"
 <v-expansion-panel
  expand
  v-model="panel">
  <v-expansion-panel-content
    v-for="(details,index) in marketCapDetails"
    :key="index">
    <template v-slot:header>
       <p>{{details.sr_no }}</p>
       <p>{{details.currency }}</p>
    </template>
    <v-card>
      #some code
    </v-card>
  </v-expansion-panel-content>
 </v-expansion-panel>
</v-expansion-panels>

 data() {
 return {
   panel: [0]
 }
}

当你不使用 value 道具时需要一个数字 expand 。

从 文档：

对应于当前打开内容的从零开始的索引。

原文由 Johan Baaij 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

与此同时，发生了重大变化：

如果你有 4 个面板，第一个和第三个应该是打开的：

 panel: [0, 2]

如果没有 multiple 道具，它只是面板的索引而不是数组：

 panel: 0

（第一个面板打开）

原文由 EscapeNetscape 发布，翻译遵循 CC BY-SA 4.0 许可协议