Vue dragula - 多次调用的丢弃事件侦听器

Question

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

在 App.vue 中

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

In 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 的数组，则记录"Dropped"6 次。我如何拥有它，以便只调用一次丢弃的事件侦听器？

Answer 1

我的解决方案如下。

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>