Question

我正在尝试使用Vuetify's extension panel，但是在循环v-expansion-panel时一次只能扩展一个。为什么要扩展所有扩展？我所做的唯一与文档不同的是，我循环v-expansion-panel而不是v-expansion-panel-content。对我来说，它似乎需要数组中的第一个元素并将其用作状态。

我要实现的目的是我想知道其中的哪个已打开，但不知道没有v模型如何实现。

This是我制作的codeandbox。任何帮助表示赞赏。

Answer 1

所有5个项目都绑定到panel数组的第一个元素，这就是它们一起打开/关闭的原因。

您需要将v-model绑定到其他值：

<v-expansion-panel
     v-for="(item, i) in 5"
        :key="i"
      expand
      v-model="panel[i]">
    ....  
</v-expansion-panel>

并更改数据：

export default {
  data() {
    return {
      panel: [[true], [false], [false], [false], [true]]
    };
  }
};

Demo here

或者您可以使用v-expansion-panel-content作为官方示例

Answer 2

我只想帮助其他无法接受此方法的人，因为所有v-expansion-panel都是动态添加的，很难将v-expansion-panel的v-model保持在正确的状态。

我发现v扩展面板具有.toggle（）美容方法，它可能可以帮助您解决问题！

Answer 3

当前，您必须使用Multiple属性。

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

    <v-expansion-panel 
     v-for="(item,index) in items" 
     :key="index"
  >

您的面板数组包含每个OPEN项目的索引。数组顺序无关紧要。因此，如果您有五个项目并希望打开第一个和第三个面板，则可以执行以下操作：

this.panel = [0,2];

Vuetify扩展面板无法一次扩展一个

3 个答案: