我正在尝试使用 Vuetify 2.3.5 以编程方式打开和关闭扩展面板
<v-expansion-panels accordion>
<v-expansion-panel v-for="(item,i) in faqs" :key="i">
<div class="expansion-panel-header-container">
<div class="handle"><v-icon>$drag_icon</v-icon></div>
<v-expansion-panel-header hide-actions expand-icon="$edit">
<span class="font-weight-bold">{{item.question}}</span>
</v-expansion-panel-header>
<div class="action-icons">
<v-icon @click.native="doSomething">$edit</v-icon>
<v-icon>$delete</v-icon>
</div>
</div>
<v-expansion-panel-content>
CONTENT GOES HERE
</v-expansion-panel-content>
<v-expansion-panels accordion>
目前 v-expansion-panel-header 成为触发面板打开和关闭的整个按钮,但我想禁用该功能并使用 <v-icon @click.native="doSomething">$edit</v-icon>
触发打开和关闭反而。我找不到任何有关如何执行此操作的文档。
有谁知道我该如何实现这个功能?
最佳答案
您需要做的就是添加 v-model
.当您将值设置为 null
时所有面板都将关闭:
<v-expansion-panels v-model="openedPanel" accordion>
...
data () {
return {
openedPanel: null
}
},
methods: {
closeAllPanels () {
this.openedPanel = null
},
openPanel (index) {
this.openedPanel = index
}
}
如果您希望能够同时打开多个面板,请改用数组:<v-expansion-panels v-model="openedPanel" multiple accordion>
...
data () {
return {
openedPanel: []
}
},
methods: {
closeAllPanels () {
this.openedPanel = []
},
openPanel (index) {
this.openedPanel.push(index)
},
closePanel (index) {
this.openedPanel.splice(index, 1)
}
}
关于javascript - 以编程方式打开 Vuetify 中的每个扩展面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63019975/