Vuejs2 Vuetify展开单击事件

我使用的是Vuetify扩展面板，每当用户单击标题时，我都想做一些事情

我的问题是，标题项周围有一些空白。因此，一旦你点击边距，事件就不会触发。我试着把点击事件放到家长身上，但没有成功。是否可以在不重写vuetify样式的情况下实现此类单击侦听器

下面的css可以实现这个功能，但对我来说有点脏。（范围界定不起作用）

---

我认为您的CSS解决方案将是相当可观的

在我看来，有一种基于javascript的解决方案比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')
            }
        }
    }
})

---

全笔：

您可以查看面板索引并对其进行操作

检查关于类似问题的另一个答案

---

我刚刚发布了这个问题的解决方案

要点：

<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.")
  }
}

...
OneExpansionPanelClick（事件）{
if（event.target.classList.contains（'v-expansion-panel-header--active'））{
log（“面板正在关闭/现在已关闭”）
}否则{
log（“面板正在打开/现在已打开”）
}
}

我不能说我对CSS解决方案感到满意，但我会接受它。感谢您努力展示一个更脏的js解决方案（我需要每个标题有不同的点击事件）

<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.")
  }
}