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

【问题标题】：Vue dragula - drop event listener called multiple timesVue dragula - 多次调用的拖放事件监听器
【发布时间】：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 的事件监听器只被调用一次？

【问题讨论】：

标签： javascript vue.js vuejs2 dragula

【解决方案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>

【讨论】：