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

问题描述

我是使用 Vue.js 和 Vuetify 的新手，我在使用扩展面板，在我的情况下，我需要能够破坏当用户切换到另一个面板时发生的一些 ajax 处理.在使用 bootstrap-vue 时，我能够通过show"事件处理这个问题，并设置一个 watched 属性的值(到所选面板的 id)，每个面板都可以检查它是否与它们的面板 id 匹配，如果它没有，它可以取消一些事情.(就我而言，我正在进行一些轮询，我想取消对未显示面板的轮询.)

I'm new to using Vue.js and Vuetify, I'm messing around with expansion panels, and in my case, I need to be able to destroy some ajax processing taking place when the user switches to another panel. While using bootstrap-vue I was able to handle this with the "show" event and set the value of a watched property (to the id of the panel selected), which each panel could check to see if matches their panel id, and if it didn't, it could cancel some things. (In my case I have some polling going on and I'd like to kill the polling for the panels not being displayed.)

同样，当面板再次打开时，我想恢复一些投票.

Similarly, when the panel is opened again I'd like to resume some polling.

感谢您的帮助.

推荐答案

在不和谐中得到了 jvanst 的帮助.

Got help from jvanst in discord.

比我想象的要简单.在扩展面板上绑定 v-model:

Was simpler than I thought. Bind v-model on expansion panel:

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

然后我就能够观察该属性，并且您将选择面板的索引.

Then I was able to watch for that property and you'll have the index of the panel selected.

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

在我的例子中，我的面板是一个单独的组件(不是静态内容)，如果它被选中需要刷新，所以我将该索引作为道具传入并观察它，然后与原始索引位置进行比较它设置的面板.如果它们相同，则表示匹配，这是要刷新的正确面板.

In my case, my panel was a separate component (not static content) and needed to refresh if it was selected, so I passed in that index as a prop and watched for it, then compared to the original index position of the panel that it was set up with. If they were the same it was a match, and that was the correct panel to be refreshed.

这篇关于Vuetify 扩展面板 - 如何捕获 onOpen/Show onClose/Collapse?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！