Vueフルカレンダー再フェッチイベントエラー

Question

新しいイベントを追加するときにイベントをリフレッシュする際に問題が発生しています。イベントは、データベースの罰金に挿入されますが、

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

への呼び出し

は、次のエラーをスローします：ここで

[Vue warn]: Error in event handler for "refetch-events": "TypeError: $(...).fullCalendar is not a function" 

はさらに、私がやろうとしています何を実証するコードのいくつかのより多くのです。

<template> 
<div> 
    <full-calendar ref="calendar" :event-sources="eventSources" @day-click="daySelected" @event-selected="eventSelected" :config="config"></full-calendar> 

    <!-- Modal Component --> 
    <b-modal ref="my_modal" title="New Appointment" @ok="submit" @shown="clearModalValues"> 
     <form @submit.stop.prevent="submit"> 
     <label>Client:</label> 
     <b-form-select v-model="selectedClient" :options="clientOptions" class='mb-3'></b-form-select> 

     <label>Service:</label> 
     <b-form-select multiple v-model="selectedService" :options="serviceOptions" class='mb-3'></b-form-select> 

     <label>Start time:</label> 
     <time-picker v-model="myTime"></time-picker> 

     <label>Notes:</label> 
     <b-form-input textarea v-model="notes" placeholder="Notes"></b-form-input> 
     </form> 
    </b-modal> 
    <!-- /Modal Component --> 

    </div> 
</template> 

<script> 
export default { 
    props: { 
    staff:{ 
     type: Number, 
     required: true 
    }, 
    }, 
    data() { 
    return { 
     myTime: new Date(), 
     selectedService: [null], 
     selectedClient: null, 
     selectedStartTime: new Date(), 
     notes: null, 
     serviceOptions: [], 
     clientOptions: [], 
     events: [], 
     config: { 
     timeFormat: 'h(:mm)', 
     eventClick: (event) => { 
      console.log('Event Clicked: '+event.title); 
     }, 
     }, 
     selected: {}, 
    }; 
    }, 
    computed: { 
    eventSources() { 
     return [ 
     { 
      events(start, end, timezone, callback) { 
      axios.get('/getEvents').then(response => { 
       callback(response.data) 
      }) 
      } 
     } 
     ] 
    } 
    }, 
    mounted() { 
    this.myTime = new Date() 
    axios.get('/getClients').then(response => this.clientOptions = response.data); 
    axios.get('/getServices').then(response => this.serviceOptions = response.data); 
    }, 
    methods: { 
    clearModalValues() { 
     this.selectedService = [null]; 
     this.selectedClient = null; 
     this.selectedStartTime = new Date(); 
     this.myTime = new Date(); 
     this.notes = null; 
    }, 
    submit(e) { 

     axios.post('/addEvent/',{'selectedService':this.selectedService,'selectedClient':this.selectedClient,'selectedStartTime':this.selectedStartTime,'notes':this.notes}).then(function(response){ 
     //console.log(response.data); 
     new PNotify({ 
      title: 'Success', 
      text: 'New event has been created', 
      icon: 'icon-checkmark3', 
      type: 'success' 
     }); 

     this.selectedService = [null]; 
     this.selectedClient = null; 
     this.selectedStartTime = new Date(); 
     this.notes = null; 
     this.myTime = new Date(); 

     // ******** I HAVE TRIED THESE CALLS AS PER DOCUMENTATION ********** 
     //this.$refs.calendar.fireMethod('refetch-events') 
     //this.$refs.calendar.fullCalendar.$emit('refetch-events'); 
     //this.$refs.calendar.$emit('refetch-events'); 

     console.log(this.$refs.calendar); 
     }.bind(this)); 
    }, 
    eventSelected(event) { 
     console.log('Event Selected: '+event.title); 
    }, 
    daySelected(date,event,view){ 
     this.$refs.my_modal.show(); 
     this.selectedStartTime = date.format("YYYY-MM-DD HH:mm:ss"); 
     this.myTime = date.toDate(); 
    }, 
    }, 
}; 
</script> 

文書によれば、正しいはずです。私はそれが遅れていることを知っていて、これは2時間ほどであったので、私は単純なものを見落とすかもしれません。再びこれはvueフルカレンダーであり、通常のフルカレンダーではありません。私は、submitメソッドで新しいイベントを追加するときにrefetchEventsを呼び出すだけです。ありがとう！

Answer 1

私はこの問題を見つけました.Brockの助けを借りてありがとうございます。私は、使用していたhtmlテンプレートも呼び出していたので、複数のバージョンのjqueryを実行していました。