[Vuejs]-How to capture child checkbox click event inside parent li?

0đź‘Ť

âś…

I found out what was happening with the help of Chrome Dev Tools.

There’s a label right next to the checkbox, associated to it:

<input type="checkbox" (...) />
<label :for="'checkbox-' + item.id" (...) ></label>

Inspecting the <input type=checkbox> using Google Chrome’s Dev Tools, it seems like the checkbox “has no area”:

Checkbox Screenshot

•••

While inspecting the <label> right next to it, shows me it actually “wraps and surrounds” the checkbox:

•••

Label Screenshot

So I added the @click.capture.stop.prevent="toggleNextOrder(item.id)" Event Handler to the label, instead of the checkbox and now it works.

Leave a comment