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

Question

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

在 vuetify 文档中，他们同时拥有 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]
         }   
      }
}

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

当您不使用 expand 时，value 属性采用数字。

来自docs：

Corresponds to a zero-based index of the currently opened content.

Answer 2

同时发生了重大变化：

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

panel: [0, 2]

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

panel: 0

（第一个面板打开）

Answer 3

如果您只想默认打开第一个项目，请使用 'mandatory' 属性

Answer 4

您还可以在扩展面板上设置 :value 属性。如果您只使用一个扩展面板，此属性也有帮助。

示例：

  <v-expansion-panels :value="opened">
   <v-expansion-panel>
      <v-expansion-panel-header>
        Incomes and Expenses monthly
      </v-expansion-panel-header>
      <v-expansion-panel-content>
      ...
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-expansion-panels>

...

data() {
return {
  opened: 0,
}

},

根据 : https://vuetifyjs.com/en/api/v-expansion-panels/#props-value

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

Vuetify - How to keep the first expansion panel open by default and if I open another panel, the others should be close?

vue.js

vuetify.js