Vue.js不显示日历

Question

我正在使用vue-full-calendar在我的网页上显示日历。

我在这里遍历数据库中的项目并获取日期，以便以后可以填写日历事件（使用my-message组件中的props）。

Id   Name   StudentId   CreateDate    Location 
1    Leo    102         2018-9-18     USA

  

my-message组件位于主类中：*

<template>
    <div class="row" > 

        <div  @click="clickedDiv" v-for="val in allProjects" :key="val.projectName" class="col-md-5 margin-bottom-30"    >


          <my-message id ="calendar"  v-bind:title="val.projectName"  v-bind:dates= val.answeredDates v-bind:dateTitle = val.projectId  v-bind:link="'/#/editstartup' + '?id=' + val.projectId + '&title='+ val.projectName "></my-message>
        </div>
    </div>

    </template>

当我在本地使用它时，此代码有效，但是当我构建它时，calendats不显示，并且出现此错误：

Vue.component('my-message', {
  props: ['dates', 'title', 'dateTitle', 'link'],
  data: function () {
    var customEvents = [];
    this.dates.forEach((event) => {
      customEvents.push({

        title: this.dateTitle,

        start: event,
        color: 'rgb(0, 95, 206)',
        textColor: 'rgb(0, 95, 206)',

        clickedDate: '',
        projectId: '',
        answeredDateConfirmURI: 'http://...'



      })
    })
    return {
      isVisible: true,
      events: customEvents,
      config: {
        defaultView: 'month',

      },

}
  },
  methods: {

    getAnsweredDateConfirm: function (id) {

      axios.get('http://localhost:8081/webapi/projects/answers/' + id)
        .then(response => {
          console.log(response.data);

        })
        .catch(error => {
          console.log(error);
        });
    },
    eventRender: function (event, element) {
      //  console.log(event)
    },
    eventClick: (event) => {

      this.selected = event;
      console.log(event);

      this.projectId = event.title;

          this.clickedDate = event.start._i;

      this.$router.push("mystartups?date=" + this.clickedDate + "&project_id=" + this.projectId + "&project_title=" + this.title);

    },

    dayClick(date, event, view) {
      // console.log(date, event, view)
      console.log(date.format())
      console.log(event);
    },
    refreshEvents() {
      this.$refs.calendar.$emit('refetch-events')
    },
    eventSelected(event) {
      this.selected = event;
      console.log(event);
    }
  },


  template: `

   <article class="tile is-child notification" v-show="isVisible">

  <!--

  <p class="title">{{ title }}</p>-->

  <a  class="title" v-bind:href=link  style="text-decoration:none; font-family: 'Open Sans', sans-serif;"> {{title}}
<i class="far fa-edit"></i>

  </a>

   <button class="delete" aria-label="delete" @click="isVisible = false"></button>

   <full-calendar ref="calendar" :config="config" :events="events" @event-selected="eventSelected"></full-calendar>


  <p class="subtitle">{{ body }}</p>

            </article>

`

});