I am currently working on developing a web application that incorporates draggable elements utilizing the Vue.js framework and vue-dragula plugin. The main goal of the app is to allow users to drag elements across multiple containers.
Within App.vue
<template>
<div v-for="container in containers">
<container/>
</div>
</template>
Inside Container.vue
<template>
<div v-dragula="elements" bag="first-bag">
<div v-for="element in elements" :key="element.id">
<element v-bind="element"/>
</div>
</div>
</template>
export default {
mounted() {
Vue.$dragula.$service.eventBus.$on('drop', () => {
console.log('Dropped');
});
}
}
I am looking to implement an event listener that can recognize when an element has been dropped. However, the current method for the event listener is triggering multiple times. Each time it is called once per container in the array. For instance, if there are 6 containers, 'Dropped' will be logged 6 times. How can I ensure that the drop event listener is only triggered once?