本文旨在解决在使用Vue FullCalendar组件时，通过点击按钮一次性加载多个BOM数据到日历中导致的问题。通过分析问题代码，并结合解决方案，提供了一个清晰的步骤，帮助开发者避免数据重复加载，并确保FullCalendar组件的正常使用。
问题分析与解决方案
在使用Vue FullCalendar组件时，如果在点击按钮触发数据加载时，发现数据被重复加载到日历中，这通常是由于监听器（watcher）的重复触发或初始化逻辑不当造成的。在提供的代码中，getBomData 的 watch 监听器，配合 immediate: true 可能会导致在组件挂载时和数据更新时都执行 initializeDraggable() 方法，从而重复初始化拖拽功能，导致数据重复加载。
解决方案是将 watch 监听器中的 initializeDraggable() 调用移除，并在 mounted 钩子函数中手动调用一次，确保只在组件挂载后进行一次初始化。
实现步骤
移除watch监听器：
立即学习“前端免费学习笔记（深入）”；
首先，移除以下代码块：
watch: { getBomData: { handler() { this.$nextTick(() => { this.initializeDraggable(); }); }, deep: true, immediate: true, },}
这段代码会导致 getBomData 每次变化时都执行 initializeDraggable()，从而重复初始化拖拽功能。
在mounted钩子中调用initializeDraggable：
确保 initializeDraggable() 方法在 mounted 钩子函数中被调用。 检查mounted中是否存在调用，若没有，则添加。
async mounted() { const payload = { product_unit: this.productUnit, } await this.$store.dispatch('getBom', payload) this.bomDatas = this.getBomData ? [...this.getBomData] : [] this.calendarOptions.resources = this.facilityDatas.map((facility, index) => ({ id: index.toString(), title: facility.facility_name, })) await this.initializeDraggable() // 确保这里调用了 initializeDraggable() this.fullCalendar = this.$refs.fullCalendar.$refs.calendar },
这样可以确保在组件挂载后，拖拽功能只被初始化一次。
代码解释
mounted 钩子函数： Vue组件生命周期中的一个钩子，在组件挂载到DOM后执行。在这里，我们首先从Vuex store中获取BOM数据，然后初始化FullCalendar的资源，并调用 initializeDraggable() 方法来设置拖拽功能。initializeDraggable() 方法： 这个方法负责初始化拖拽功能，它会找到DOM中所有的 fc-event 元素（BOM数据），并为它们添加拖拽事件监听器。$nextTick()： 在DOM更新循环结束之后执行延迟回调。 在数据更新后，使用 $nextTick() 确保DOM已经更新，然后再执行 initializeDraggable()。
完整代码示例（修改后的部分）
import processList from '@/components/detail/processList.vue'import equipmentList from '@/components/detail/equipmentList.vue'import { mapGetters } from 'vuex'import FullCalendar from '@fullcalendar/vue'import dayGridPlugin from '@fullcalendar/daygrid'import interactionPlugin, { Draggable } from '@fullcalendar/interaction'import resourceTimelinePlugin from '@fullcalendar/resource-timeline'export default { components: { FullCalendar, processList, equipmentList, }, data() { return { draggedData: null, calendarOptions: { // ... calendar options }, removeAfterDrop: false, calendarEvents: [], } }, computed: { // ... computed properties }, async mounted() { const payload = { product_unit: this.productUnit, } await this.$store.dispatch('getBom', payload) this.bomDatas = this.getBomData ? [...this.getBomData] : [] this.calendarOptions.resources = this.facilityDatas.map((facility, index) => ({ id: index.toString(), title: facility.facility_name, })) await this.initializeDraggable() this.fullCalendar = this.$refs.fullCalendar.$refs.calendar }, methods: { // ... methods initializeDraggable() { const containerEl = document.getElementById('external-events') if (containerEl) { const eventElements = containerEl.getElementsByClassName('fc-event') Array.from(eventElements).forEach((eventEl, index) => { new Draggable(eventEl, { eventData: () => { const bomData = this.bomDatas[index] return { title: `${bomData.product_unit} - ${bomData.process}`, } }, }) eventEl.addEventListener('dragstart', (event) => { const bomData = this.bomDatas[index] const dragData = { product_unit: bomData.product_unit, process_name: bomData.process_name, } event.dataTransfer.setData('text', JSON.stringify(bomData)) this.draggedData = dragData }) }) const calendarContainerEl = document.getElementById('calendar-container') if (calendarContainerEl) { calendarContainerEl.addEventListener('drop', this.handleDrop) calendarContainerEl.addEventListener('dragover', this.handleDragOver) } } }, },}
注意事项
确保 initializeDraggable() 方法只在组件挂载后调用一次。如果问题仍然存在，检查 showBom() 方法是否被多次调用，导致数据重复加载。检查 getBomData 是否被意外修改，导致监听器被多次触发。
总结
通过移除不必要的 watch 监听器，并在 mounted 钩子函数中手动调用 initializeDraggable() 方法，可以有效地解决Vue FullCalendar组件中BOM数据重复加载的问题。 这种方法确保了拖拽功能只在组件挂载后初始化一次，避免了数据重复加载，从而保证了FullCalendar组件的正常使用。 记住，理解Vue组件的生命周期以及如何正确使用监听器是解决此类问题的关键。
以上就是解决Vue FullCalendar同时加载多个BOM数据的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1532612.html
微信扫一扫 
支付宝扫一扫 
