让 v-checkbox 在 v-expansion-panel-header 中工作

Question

我有一个 v-expansion-panel-header，其中包含一个 v-checkbox。如果我单击该复选框，该复选框不会选中/取消选中。相反，扩展面板会打开/关闭。如何允许复选框工作并仅在单击提供的默认图标时才打开面板？

我尝试在 v 复选框上使用 @click.stop 和 @click.native.stop、@click.capture、@change.stop 等，但它不起作用。

  <v-expansion-panels>
    <v-expansion-panel>
      <v-expansion-panel-header>
        <v-checkbox v-model="checkbox" label="MyCB" @click.stop />
      </v-expansion-panel-header>
      <v-expansion-panel-content>
        Lorem ipsum dolor.
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-expansion-panels>

Answer 1

这里的问题是事件从复选框冒泡到扩展面板。您需要做的是，当单击复选框时，将事件传递到函数中，并取消事件冒泡。

    check: function(e) {
      e.cancelBubble = true;
    }

在这里检查工作代码

请注意，在示例中，我在 v-checkbox 周围包裹了 v-flex。这是因为 v 复选框跨越了扩展面板的整个宽度，我认为当您单击不靠近复选框的位置时，您仍然希望扩展能够工作。您可能可以找到一些其他方法来防止 CSS 中的全角，但这只是演示防止事件冒泡解决方案的一种快速而肮脏的方法。