Vue3 list-item with checkbox and list link

Questions
1

Hello, so I need this layout, a list of checkbox, that are linking to some other page via “link” prop, but also have a checkbox on the left side, so users can toggle it, only if they want more details they click the list it self, or edit.

The thing is when I click the checkbox, it goes to the link direclty instead of prioritizing the checkbox toggle
image

Solutions?

Sample example:

2

@nolimits4web any idea? Thanks.

3

That is not the best UI in general, as you have one clickable element (label with input) inside of the another (link). You better move Checkbox out of the link and with custom CSS position it absolutely on top of the link