Vue dragula - 多次调用的拖放事件监听器

Posted 2023-05-09

【中文标题】Vue dragula - 多次调用的拖放事件监听器

【英文标题】：Vue dragula - drop event listener called multiple times

【发布时间】：2020-05-05 05:08:47

【问题描述】：

我正在尝试使用 Vue.js 和 vue-dragula 框架构建一个带有可拖动元素的 Web 应用程序。在应用程序中，我试图让多个容器具有可以拖过容器的元素。

在 App.vue 中

<template>
   <div v-for="container in containers">
      <container/>
   </div>
</template>

在 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');
      );
   

我正在尝试启用能够检测元素何时被删除的事件侦听器。虽然当前事件侦听器方法有效，但它会被多次调用。具体来说，它被称为容器数组的长度。例如，如果容器是长度为 6 的数组，则“已丢弃”记录 6 次。如何让 drop 的事件监听器只被调用一次？

【参考方案1】：

下面是我的解决方案。

App.vue

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

在 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>