以编程方式打开 Vuetify 中的每个扩展面板

Question

我正在尝试使用 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> 触发打开和关闭。

我找不到任何有关如何执行此操作的文档。

有谁知道我该如何实现这个功能？

Answer 1

您需要做的就是添加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)
  }
}