Question

基本上，我有4个扩展面板，我希望第一个面板默认情况下处于打开或扩展状态，当我单击第二个面板时，第一个面板应该处于关闭状态。

在vuetify文档中，它们都有两个。一种是默认情况下如何打开面板的方法，另一种是何时应该打开面板，其他人应该关闭。

<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

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

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

panel: [0, 2]

没有多重道具，它只是面板的索引而不是数组的索引：

panel: 0

（第一个面板打开）

Answer 2

从您的expand中删除v-expansion-panel。然后，代替

panel: [true, false, false, false]

使用

panel: 0

当您不使用value时，expand道具会使用一个数字。

来自docs：

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

Answer 3

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

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

3 个答案: