fullcalendar/VUE 应用程序中的事件未更新答案

【问题标题】：events in fullcalendar/VUE application not updatingfullcalendar/VUE 应用程序中的事件未更新
【发布时间】：2017-12-18 09:07:50
【问题描述】：

在我的 cal.vue 组件中，我有一个 fullcalendar 组件。在 cal.vue 中，我有一个名为 submit 的方法。在提交内部，我使用this.$refs.calendar 对fullcalendar 组件进行（成功）引用。但是，当我在提交函数中执行 this.$refs.calendar.$emit('refetchEvents'); 时，不会获取事件（我的事件不会在我的日历上更新）。为什么我的事件在提交时没有更新，我该如何更新它们？

以下是相关代码：

<template>
   <div id="calendar"  :navL="navLinks" :event-sources="eventSources" @event-selected="eventSelected" @event-created="eventCreated" :config="config" >
      <button    class="btn btn-secondary" v-on:click="submit()">
         Submit
      </button>
      <full-calendar id="target" ref="calendar" :event-sources="eventSources" @event-selected="eventSelected" @day-click="click"@event-created="eventCreated" :config="config"></full-calendar>
   </div>
</template>

<script>
   const self = this;
   export default {
      name: 'calendar',
      data() {
         return {
            eventSources: [
               {
                  url: 'http://localhost:3000/getAppointments',
                  type: 'GET',
                  data: {
                     id: this.$store.getters.user
                  },
                  error: function() {
                     alert('there was an error while fetching events!');
                  },
               }
            ],  
         };
      },

      methods: {
         submit: function() {
            console.log(this.$refs.calendar); //prints fullcalendar VUE component
            this.$refs.calendar.$emit('refetchEvents'); //nothing appears to happen here
         },
      },
   }
</script>

【问题讨论】：

什么是full-calendar？包装 jQuery 插件的 Vue 组件？它仍然使用jQuery吗？
full-calendar 是一个包装了 jQuery 插件 full-calendar 的 VUE 组件。我相信它使用 jQuery
你有链接吗？至少有两个 Vue 包装器。
calendar.vue 是上面代码所在的地方
如果 VUE 代码看起来没问题，可能是我使用的 vue-fullcalendar 包装器有问题。我会向他们发布问题，看看他们怎么说

标签： javascript vue.js fullcalendar

【解决方案1】：

根据documentation，

this.$refs.calendar.$emit('refetchEvents')

应该是

this.$refs.calendar.$emit('refetch-events')

【讨论】：

感谢 Bert 我试过了，但它似乎不起作用
@matt 你能设置一个显示问题的例子吗？我无法运行你的代码。
实际上 Bert 很难设置，因为我还要配置一个数据库
@Matt 是的，这就是为什么，如果你能隔离问题，我们可以解决它。
我不知道我现在是否可以创建一个完整的示例，但到目前为止感谢您的帮助。这可能是包装器的问题，我会等到他们回复并在此处发布结果

【解决方案2】：

如果通过 npm 包使用原版 FullCalendar：“@fullcalendar/core”、“@fullcalendar/daygrid”、“@fullcalendar/timegrid”、“@fullcalendar/vue”

html: <full-calendar ref="fullCalendar" :events="events" />
inside a method to update an event:
        let calendar = this.$refs.fullCalendar.getApi()
        const updatedEvent = calendar.getEventById(eventId)
        updatedEvent.setProp('title', 'New Title')
        updatedEvent.setProp('backgroundColor', 'yellow')
        updatedEvent.setProp('borderColor', 'yellow')
        updatedEvent.setProp('textColor', 'black')

以上将重新呈现 fullCalendar 事件，但不会更改您的 this.events 数组。一次拍摄中可能会包含所有事件的更多内容，否则您必须这样做：

this.events.forEach(event => {
  ...similar code the above
})

【讨论】：