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

Question

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

我试图实现的是，我想知道其中哪一个是开放的，但如果没有v型，我不知道如何实现。

这是我制作的代码沙盒。感谢您的帮助。

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]]
};
}
};

在这里演示

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

Answer 2

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

我发现v-expansion面板有beauty方法.thoggle((，它可能会帮助你解决问题！

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];