编程语言
首页 > 编程语言> > javascript-fullcalendar / VUE应用程序中的事件未更新

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

作者:互联网

在我的cal.vue组件中,我有一个全日历组件.在cal.vue中,我有一种称为Submit的方法.在提交内部,我使用this.$refs.calendar来(成功)引用fullcalendar组件.但是当我这样做时.$refs.calendar.$emit(‘refetchEvents’);在我的Submit函数中,未获取事件(我的事件未在我的日历上更新).为什么提交后我的活动没有更新,我该如何更新?

以下是相关代码:

<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>

解决方法:

根据documentation,

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

应该

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

标签:vue-js,fullcalendar,javascript
来源: https://codeday.me/bug/20191111/2017978.html