如何默认使用 vue/vuetify 扩展 v-expansion-panel？

Question

我想<v-expansion-panel>在页面加载时默认打开一个扩展面板，但无法弄清楚。我知道对于 Angular，你设置了 [expanded]="true"，但这不适用于 Vue。我在任何地方都找不到这个答案。我不确定是否需要 javascript，或者是否可以在<v-expansion-panel>标签内完成。

我试过了<v-expansion-panel [expanded]="true"，它确实显示了该部分中的按钮，但就是这样。

<section>
   <v-app>
      <v-expansion-panel
         v-model="search"
         expand
      >
.
.
.
   </v-app>
</section>

Answer 1

观看文档中的 PROPS 部分：

https://vuetifyjs.com/en/components/expansion-panels#expansion-panel

Expand属性表示：在选择另一个扩展面板时保持扩展面板打开。

这不是你想要的。

您需要使用value属性：控制扩展面板中内容的打开/关闭状态。对应于当前打开内容的从零开始的索引。如果使用 Expand 属性，那么它是一个布尔数组，其中索引对应于内容的索引。

所以，就你而言：

<section>
 <v-app>
  <v-expansion-panel
     v-model="search"
     :value="0"
  >
  .
  .
  .
  </v-app>
</section>

其中“0”是默认展开的扩展面板的索引。

我在这里举了一个例子：

https://codepen.io/anon/pen/pmqyOP?&editable=true&editors=101#anon-login