Question

在 cal.vue 组件内部，我有一个fullcalendar组件。在 cal.vue 中，我有一个名为submit的方法。在提交内部，我使用fullcalendar对this.$refs.calendar组件进行了（成功）引用。但是，当我在提交函数中执行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>

Answer 1

根据documentation，

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

应该是

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

Answer 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
})

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

2 个答案: