[Vuejs]-Vue dragula โ€“ drop event listener called multiple times

0๐Ÿ‘

My solution below.

App.vue

<template>
   <div v-for="(container, containerIndex) in containers">
      <container :containerIndex="containerIndex" />
   </div>
</template>

In Container.vue

<template>
   <div v-dragula="elements" :bag="'first-bag-'+containerIndex">
      <div v-for="element in elements" :key="element.id">
         <element v-bind="element"/>
      </div>
   </div>
</template>
<script>
   export default {
      props: ['containerIndex'],
      mounted() {
         Vue.$dragula.$service.eventBus.$on('drop', ([bag, curElmt, allElmts]) => {
            if (bag == 'first-bag-'+this.containerIndex) {
               console.log('Dropped'); // This line is not repate based on containers length
            }
         });
      }
   }
<script>

Leave a comment