默认情况下如何使用vue / vuetify扩展v-expansion-panel?

时间:2019-05-31 19:55:47

标签: vue.js vuetify.js

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

我尝试过

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

2 个答案:

答案 0 :(得分: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());

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

答案 1 :(得分:0)

观看文档中的PROPS部分:

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

展开建议:展开展开面板,同时选择另一个。

这不是您想要的。

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

所以,就您而言:

<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