Vuetify - 如何在默认情况下保持第一个扩展面板打开，如果我打开另一个面板，其他面板应该关闭？

Question

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

在 vuetify doc 中，它们都有。一个是如何默认打开面板，第二个是，什么时候应该打开其他人应该关闭。

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

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。

从文档：

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

Answer 2

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

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

panel: [0, 2]

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

panel: 0

（第一个面板打开）