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>

根据文件，它应该是正确的。我知道它已经很晚了，我已经在这里待了几个小时，所以我可能会忽略一些简单的事情。同样，这是vue-full-calendar而不是常规的完整日历。我只需要在submit方法中添加新事件时调用refetchEvents。谢谢！

Answer 1

我找到了这个问题，感谢Brock的帮助。我有多个版本的jquery运行（我正在使用的html模板也调用它）。

Vue-Full-Calendar refetch-events错误

1 个答案: