Vuetify expansion panels - how can I capture onOpen/Show onClose/Collapse?

问题

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.

Thanks for some help.

回答1:

Got help from jvanst in discord.

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.

来源：https://stackoverflow.com/questions/51238562/vuetify-expansion-panels-how-can-i-capture-onopen-show-onclose-collapse

标签

vuetify.js