Vue.js + Trigger only one event

Question

I have the below dropdown created using li and within the dropdown i want to provide the delete functionality as well. If 'X' is clicked the record must be deleted. However when i click on 'X' it also triggers 'changeFilter' which is also inside the same li. is there a way i can prevent the 'changeFilter' trigger?

Below is the code -

<ul>
            <li v-on:click="createNew">Create new Filter</li>
            <li v-for="item in filters.entities" v-on:click="filter.changeFilter(item.id,item.name)">{{ item.name }}<div title="Delete filter" v-on:click="delete(item.id)">x</div></li>
        </ul>

//Inside js file 

delete: (itemId) => {
                    var result = window.parent.Xrm.WebApi.deleteRecord('ice_filters', itemId.toString());
                   
                }

Boussadjra Brahim · Accepted Answer · 2022-07-18 11:15:38Z

3

Try out to add the stop modifier to stop the event propagation from child to parent element :

<div title="Delete filter" v-on:click.stop="delete(item.id)">x</div>

edited Jul 18, 2022 at 11:15

answered Jul 18, 2022 at 11:11

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

D.Schaller Over a year ago

Helpful Link -> Event Modifier Documentation

Collectives™ on Stack Overflow

Vue.js + Trigger only one event

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related