javascript - Vue.js 不显示日历

Question

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

在这里，我遍历数据库中的项目并获取日期，以便稍后填写日历事件（使用 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>

my-message 组件在主类中：*

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>

`

});

此代码在我本地使用时有效，但是当我构建它时，日历不显示并且我收到此错误：

> vue.esm.js:1741 ReferenceError: body is not defined
>     at o.eval (eval at ko (vue.esm.js:10680), <anonymous>:3:642)
>     at o.t._render (vue.esm.js:4544)
>     at o.<anonymous> (vue.esm.js:2788)
>     at je.get (vue.esm.js:3142)
>     at new je (vue.esm.js:3131)
>     at vue.esm.js:2795
>     at o.hn.$mount (vue.esm.js:8540)
>     at o.hn.$mount (vue.esm.js:10939)
>     at init (vue.esm.js:4137)
>     at vue.esm.js:5608

标签： javascripthtmlvue.jsfullcalendarvue-component