I have a code like this.

<label class="pr-container">
    Please confirm you have read and understood out 
   <span @click="openConditionsModal($event, 'terms')" class="pr-default-link">Terms & Conditions</span> and
   <span @click="openConditionsModal($event, 'policy')" class="pr-default-link">Privacy Policy</span>. 
     bla blabladasd

   <input v-model="agreed" type="checkbox" checked="checked">
   <span class="checkmark"></span>
</label>

When I click Terms and Condition or Privacy policy spans, what also happens is <input v-model="agreed"> also gets marked. If clicking again, it gets unmarked. What I want is when clicking on span, checkbox and its value shouldn't change at all.

Any ideas why it happens and how to avoid that?

I have a code like this.

<label class="pr-container">
    Please confirm you have read and understood out 
   <span @click="openConditionsModal($event, 'terms')" class="pr-default-link">Terms & Conditions</span> and
   <span @click="openConditionsModal($event, 'policy')" class="pr-default-link">Privacy Policy</span>. 
     bla blabladasd

   <input v-model="agreed" type="checkbox" checked="checked">
   <span class="checkmark"></span>
</label>

When I click Terms and Condition or Privacy policy spans, what also happens is <input v-model="agreed"> also gets marked. If clicking again, it gets unmarked. What I want is when clicking on span, checkbox and its value shouldn't change at all.

Any ideas why it happens and how to avoid that?

• javascript
• vue.js
• vuejs2
• vue-ponent

• Do you have a "prevent default" option in that handler? – tadman Commented Sep 19, 2019 at 18:48

3 Answers 3

Try .stop or .self modifiers to stop the event propagation as follows :

 <span @click.stop="openConditionsModal($event, 'terms')" ...

or

  <span @click.self="openConditionsModal($event, 'terms')" ...

learn more about event modifiers

Try to refactor your HTML like this

 <div class="pr-container">
            Please confirm you have read and understood out 
                   <span @click="openConditionsModal($event, 'terms')" class="pr-default-link">Terms & Conditions</span> and
                   <span @click="openConditionsModal($event, 'policy')" class="pr-default-link">Privacy Policy</span>. 
                     bla blabladasd

                <label>
                   <input v-model="agreed" type="checkbox" checked="checked">
                   <span class="checkmark"></span>
                </label>
        </div>

This is happening because your spans are part of a label that's associated with an input (you placed the input inside of the label). Clicking on a label associated with an input will focus or trigger the input.

I'd remend restructuring your html and using css to fix this. Generally this approach is more robust and accessible than applying event modifiers like stop and prevent.

Your structure could look something like this:

<label for="agreed">Check here to indicate that you understand:</label>
<span>Terms & Conditions</span>
<span>Privacy Policy</span>
<input v-model="agreed" type="checkbox" id="agreed">

You can use CSS and a bit of restructuring to make the spans and the label all appear as one unit. Note that a screen reader will tie the label to the input so having it makes sense on its own is a good idea.