vue.js - 如何默认使用 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
展开 prop 说:在选择另一个时保持扩展面板打开。
这不是你想要的。
您需要使用 值 prop:控制扩展面板中内容的打开/关闭状态。对应于当前打开的内容的从零开始的索引。如果使用 expand prop，那么它是一个 bool 数组，其中索引对应于内容的索引。
所以，在你的情况下:

<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