q-btn内q-checkbox点击无法触发@click事件的解决方法咨询

在Quasar的QBtn组件内部嵌套了QCheckbox和文本div，点击文本区域能正常触发按钮的tog(item)函数，但点击QCheckbox时无反应，代码如下：

<q-btn
      flat
      color="blue"
      class="full-width no-padding"
      @click="tog(item)"
    >
      <q-checkbox
        class="q-mr-sm"
        v-model="item.toggle"
      />

      <div class="text-caption text-grey" style="">{{ item.label }}</div>
      <q-space />
    </q-btn>

方法1：给QCheckbox绑定独立点击事件 #

由于QCheckbox内部默认会阻止点击事件冒泡到父级组件，直接在QCheckbox上绑定@click调用tog(item)即可：

<q-btn
      flat
      color="blue"
      class="full-width no-padding"
      @click="tog(item)"
    >
      <q-checkbox
        class="q-mr-sm"
        v-model="item.toggle"
        @click="tog(item)"
      />

      <div class="text-caption text-grey">{{ item.label }}</div>
      <q-space />
    </q-btn>

点击checkbox时会自动切换item.toggle的状态，同时触发tog(item)函数，满足需求。

方法2：使用事件捕获模式触发QBtn的点击 #

修改QBtn的点击事件为@click.capture，让事件在捕获阶段触发，不受QCheckbox的冒泡阻止影响：

<q-btn
      flat
      color="blue"
      class="full-width no-padding"
      @click.capture="tog(item)"
    >
      <q-checkbox
        class="q-mr-sm"
        v-model="item.toggle"
      />

      <div class="text-caption text-grey">{{ item.label }}</div>
      <q-space />
    </q-btn>

这种方式无需修改QCheckbox代码，仅调整事件触发时机即可实现需求。

方法3：阻止冒泡并单独调用函数（避免重复触发） #

如果希望点击checkbox时只触发一次tog(item)，可以用@click.stop阻止事件冒泡到QBtn，再单独调用函数：

<q-btn
      flat
      color="blue"
      class="full-width no-padding"
      @click="tog(item)"
    >
      <q-checkbox
        class="q-mr-sm"
        v-model="item.toggle"
        @click.stop="tog(item)"
      />

      <div class="text-caption text-grey">{{ item.label }}</div>
      <q-space />
    </q-btn>

内容的提问来源于stack exchange，提问作者Ballazx