Level 1
Hi,
"stop" event modifier should be on the child element and not the parent element, so that way you will prevent the icon click event form bubbling up to the parent element ( the button ).
Hope that helps
Jun 6, 2019
3
Level 8
Prevent event propagation in vue
Hi everybody, I have a list of available cards for online payments with stripe, there I have a button with an icon inisde, if you click the button or the icon both fire different method, however when the icon is clicked (icon is inside the button), the button method also fires, I want to avoid this but so far havne't find a way.
<button class="STRIPElist2_cardlist_container" @click.stop="setDefaultSource({ id: source.id }); SET_LOADER_ID(7563);" :class="{ 'active_card' : customerDefaultSource == source.id }" type="button" v-for="(source, index) in customerSources" :key="index">
<div class="STRIPElist2_cardlist_radio_container">
<div class="STRIPElist2_cardlist_radio_inner" :class="{ 'active_radio' : customerDefaultSource == source.id }"></div>
</div>
<span class="STRIPElist2_cardlist_text fs_normal c_normal four">✱✱✱✱ ✱✱✱✱ ✱✱✱✱ {{ source.card.last4 }}</span>
<span class="STRIPElist2_cardlist_text fs_normal c_normal brand">{{ source.card.brand }}</span>
<span class="STRIPElist2_cardlist_text fs_normal c_normal exp">{{ source.card.exp_month }} / {{ source.card.exp_year }}</span>
<i class="STRIPElist2_cardlist_close fa fa-times fs_big c_normal" @click.prevent.self="deleteSource({ id: source.id }); SET_LOADER_ID(7563);"></i>
</button>
Level 8
@HAMZAKHCHICHINE - Thanks, so maybe prevent is to stop the event from going down the DOM tree and stop from going up?
Level 1
Prevent is used to prevent the default behavior, let's say an anchor tag will redirect to a link when clicked, adding prevent event modifier will stop it from doing that, and then you can trigger whatever custom action you have.
Please or to participate in this conversation.