Vuetify expand click event - vuejs2

Question

I am using Vuetify Expansion-Panels and I would like to do something every time a user clicks on the Headline.
My Problem is that the head item has some margin around it. So once you click on the margin, the event wont fire. I tried putting the click event on the parent without any success. Is it possible to implement such click listener without rewriting the vuetify styles?
The following css will do the trick, but it seems a little bit dirty to me. (scoping does not work)
.v-expansion-panel__header {
padding: 0px;
}
.v-expansion-panel__header div {
padding: 12px 24px;
width: 100%;
height: 100%;
}
.v-expansion-panel__header .header__icon {
display: none;
}
https://codepen.io/anon/pen/wxmpyy?&editors=101

Answer 1

I think your CSS solution would be considerable.
There is a javascript-based solution which in my opinion is much more dirtier than CSS.
new Vue({
el: '#app',
methods: {
doSomething (e) {
let $target = $(e.target), $header = $('.v-expansion-panel__header');
if ($target.is($header) || $target.parents($header).is($header)) {
alert('Hello World')
}
}
}
})
Full pen: https://codepen.io/WisdomSky/pen/EpEqjr?editors=1010

Answer 2

You can watch the panel index and act on it.
Check this other answer about a similar issue.
https://stackoverflow.com/a/51253018/617395

Answer 3

I just posted my solution for this problem here.
The gist:
<v-expansion-panel #click="onExpansionPanelClick">
...
</v-expansion-panel>
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.")
}
}