Question

默认情况下，我希望在页面加载时打开一个扩展面板，但无法弄清楚。对于Angular，我知道您使用了[expanded] =“ true”，但这不适用于Vue。我没有运气能找到这个答案。我不确定是否需要javascript，或者是否可以在标记内完成。

我尝试过

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

Answer 1

它对我有用：

<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());

Answer 2

观看文档中的PROPS部分：

展开建议：展开展开面板，同时选择另一个。

这不是您想要的。

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

所以，就您而言：

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

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

我在这里举了一个例子：