以編程方式打開 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 成為觸發面板打開和關閉的整個按鈕，但我想禁用 function 並使用此<v-icon @click.native="doSomething">$edit</v-icon>觸發打開和關閉<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)
  }
}