Vue dragula -多次调用drop事件侦听器
Vue dragula -多次调用drop事件侦听器
提问于 2020-01-18 23:45:51
我正在尝试使用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的数组，那么'Dropped‘会被记录6次。如何才能使drop的事件侦听器只被调用一次？
回答 1
Stack Overflow用户
发布于 2020-12-04 15:50:23
下面是我的解决方案。
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59802141
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号