解决Vue FullCalendar同时加载多个BOM数据的问题_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

解决Vue FullCalendar同时加载多个BOM数据的问题

2025-10-26

浏览次数：次

返回列表

解决vue fullcalendar同时加载多个bom数据的问题

本文旨在解决在使用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()，从而重复初始化拖拽功能。
php商城系统
PHP商城系统是国内功能优秀的网上商城系统，同时也是一个商业的PHP开发框架，有多套免费模版，强大的后台管理功能，专业的网上商城系统解决方案，快速建设网上购物商城、数码商城、手机商城、办公用品商城等网站。 php商城系统v3.0 rc6升级 1、主要修复用户使用中出现的js未加载完报错问题，后台整改、以及后台栏目的全新部署、更利于用户体验。 2、扩展出，更多系统内部的功能，以便用户能够迅速找到需
0 查看详情

在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()。

完整代码示例（修改后的部分）

<template>
  <!-- Your template code here -->
</template>

<script>
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)
        }
      }
    },
  },
}
</script>

注意事项

确保 initializeDraggable() 方法只在组件挂载后调用一次。
如果问题仍然存在，检查 showBom() 方法是否被多次调用，导致数据重复加载。
检查 getBomData 是否被意外修改，导致监听器被多次触发。

总结

通过移除不必要的 watch 监听器，并在 mounted 钩子函数中手动调用 initializeDraggable() 方法，可以有效地解决Vue FullCalendar组件中BOM数据重复加载的问题。这种方法确保了拖拽功能只在组件挂载后初始化一次，避免了数据重复加载，从而保证了FullCalendar组件的正常使用。记住，理解Vue组件的生命周期以及如何正确使用监听器是解决此类问题的关键。

以上就是解决Vue FullCalendar同时加载多个BOM数据的问题的详细内容，更多请关注其它相关文章！

# js # json # go # ssl # ai # vue组件 # vue # 新都区公司网络推广营销 # sem是指网站优化设计吗 # 但是营销推广仍需加强 # 金山关键词排名报价 # 怎么学seo比较快 # 贵州seo整站优化方案培训 # 新闻网站建设素材视频 # 网站按天扣费优化推广 # 海南seo排名费用高吗 # 黄山区电商网站推广外包 # 相关文章 # 这段 # 在这里 # 正常使用 # 并在 # 只在 # 移除 # 多个 # 拖拽 # 加载