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

不确定，这是否是在Vue中执行此操作的好方法，但这是我的解决方案。

<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.target.classList.contains('v-expansion-panel-header--active')) {
        console.log("Panel is closing/now closed.")
      } else {
        console.log("Panel is opening/now open.")
      }
    }
  }
}
</script>

重要的一点是onExpansionPanelClick(event)函数，它发挥了所有魔力。我想在v-expansion-panel而不是v-expansion-panels中找到一种解决方案，因为我将每个面板建模为自己的组件。

Answer 3

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>```

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

3 个答案: