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)
  }
}

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

1 个答案: