Tengo un billete como se puede ver en la imagen de abajo:

Tengo un botón de eliminación como componente y estoy tratando de agregarle la funcionalidad de eliminación. Estoy usando este componente en mi componente de ticket. Así que este es mi componente de eliminación:

 <template> <div id="delete-button" @click.prevent="removeProductFromCart(item.id)"> <input type="checkbox" id="checkbox"> <div id="bin-icon"> <div id="lid"></div> <div id="box"> <div id="box-inner"> <div id="bin-lines"></div> </div> </div> </div> </div> </template> <script> import cartHelper from "../helpers/cartHelper"; export default { props: { item: Object, }, data() { return { loading: false, }; }, methods: { removeProductFromCart(id) { this.loading = true; setTimeout(() => { cartHelper.removeFromCart(id, (response) => { this.$store.dispatch('removeProductFromCart', { cart: response.data, }) this.loading = false }); }, 1000) } } }; </script>

Entonces, el componente principal es el componente del ticket:

 [![<template> <div id="sold-tickets"> <div class="card"> <div class="sold-tickets-actions properties"> <div class="sold-tickets-inner"> <DeleteButton :item = "item" /> </div> </div> </div> </div> </template>][1]][1] <script> import image from "../../../../img/Hallenbad.jpg"; import DeleteButton from "./DeleteButton"; import cartHelper from "../helpers/cartHelper"; export default { props: { item: Object, }, components: {DeleteButton}, data() { return { image: image, }; }, }; </script>

Mi problema es que el ticket se elimina incluso cuando hago clic fuera del componente secundario (Eliminar componente). Pero quiero usar el componente de eliminación como un botón y solo quiero eliminar el ticket cuando se hace clic en él, no fuera del botón.