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

【问题标题】：How to expand v-expansion-panel by default with vue/vuetify?如何使用 vue/vuetify 默认扩展 v-expansion-panel？
【发布时间】：2019-05-31 19:55:46
【问题描述】：

我希望在页面加载时默认打开一个扩展面板<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>

【问题讨论】：

标签： vue.js vuetify.js

【解决方案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

【讨论】：

这对我没有用。最终的工作是将对象设置为 true,true,true 像这样 --> search: [true, true, true]
:value="0" 做到了

【解决方案2】：

它适合我使用：

<v-expansion-panels v-model="panel" multiple>

panel: [], // default 
panel: [0, 1, 2, 3], // open items 1 to 4

如果要默认返回所有项目或使用函数展开全部：

this.panel = Array.from(Array(this.dataReturned.length).keys());

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

【讨论】：