Vuetify扩展面板-如何捕获onOpen / Show onClose / Collapse？

Question

我是Vue.js和Vuetify的新手，正在搞混扩展面板，就我而言，我需要能够销毁当用户切换到另一个面板时发生的一些Ajax处理。使用bootstrap-vue时，我可以通过“ show”事件处理此问题，并设置watched属性的值（设置为所选面板的ID），每个面板都可以检查该属性以查看其面板ID是否匹配，以及是否匹配没有，它可以取消一些事情。（就我而言，我正在进行一些轮询，我想取消未显示的面板的轮询。）

同样，当面板再次打开时，我想恢复一些轮询。

感谢您的帮助。

Answer 1

得到了jvanst的帮助。

比我想的要简单。在扩展面板上绑定v模型：

 <v-expansion-panel v-model="panelIndex">

然后，我可以监视该属性，您将选择面板的索引。

props: {
  stuff: ''
  panelIndex: -9
},
watch: {
  panelIndex: function() {
    console.log("watch panelIndex id: " + this.panelIndex) 
    //if this panelIndex matches this component's index.. do stuff since we're selected
  }
}

就我而言，我的面板是一个单独的组件（不是静态内容），如果被选中，则需要刷新，因此我将该索引作为prop传递并对其进行监视，然后将其与该面板的原始索引位置进行比较成立了。如果它们相同，则是匹配项，这是要刷新的正确面板。

Answer 2

Darkproduct 几乎明白了..但我认为正确的代码应该是使用 event.currentTarget.classList.contains('v-expansion-panel-header--active')而不是event.target.classList.contains('v-expansion-panel-header--active')

所以代码应该是

<template>
  <v-expansion-panel class="expanel" @click="onExpansionPanelClick">
    <v-expansion-panel-header>
    </v-expansion-panel-header>

    <v-expansion-panel-content>
    </v-expansion-panel-content>
  </v-expansion-panel>
</template>

<script>
export default {
  name: "ExPanel",
  components: {},
  props: {},
  data: function() {
    return {}
  },
  methods: {
    onExpansionPanelClick(event) {
      if(event.currentTarget.classList.contains('v-expansion-panel-header--active')) {
        console.log("Panel is closing/now closed.")
      } else {
        console.log("Panel is opening/now open.")
      }
    }
  }
}
</script>```