Vue.js + 只觸發一個事件

Question

我使用 li 創建了以下下拉列表，並且在下拉列表中我也想提供刪除功能。 如果單擊“X”，則必須刪除記錄。 但是，當我單擊“X”時，它也會觸發“changeFilter”，它也在同一個 li 內。 有沒有辦法可以防止“changeFilter”觸發？

下面是代碼 -

<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());
                   
                }

Answer 1

嘗試添加stop修飾符以停止從子元素到父元素的事件傳播：

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