Javascript Vue.js使用道具将数据传递到Vue完整日历

我正在构建一个包含多个日历的网页。在我的MySQL数据库中，我有一个包含项目的表，每个项目都与另一个表链接，该表包含每个项目在特定日期的答案。 该页面为每个项目加载一个日历，我必须在日历上突出显示数据库中有答案的日期

代码如下： 在这里，我得到了所有的项目，并将日期发送给道具，以便以后我可以用日期填写主要事件

      <template>


    <div v-bind="getAllProjects" class="tile is-vertical is-8" @click="clickedDiv" >
      <div class="tile"  >
        <div  v-for="val in allProjects" :key="val.projectName"     class="tile is-parent is-8" >

          <my-message  v-bind:title=val.projectName  v-bind:dates= val.answeredDates body=""></my-message>

        </div>


  </div>
    </div>


    </template>

    <code>


    import axios from "axios";

    export default {
      data() {
        return {
          allProjectsURI:
            "http://localhost:8081/agilebot/webapi/projects/allprojects",
          allProjects: [],
          dates: []
        };
      },
      computed: {},
      methods: {
        getAllProjects: function() {
          var self = this;
          axios
            .get(this.allProjectsURI)
            .then(response => {
              console.log(response.data);
              this.allProjects = response.data;
              this.dates = response.data;
            })
            .catch(error => {
              console.log(error);
            });
        },

        clickedDiv: function(event) {
          console.log(event.target);
        }
      },

      beforeMount() {
        this.getAllProjects();
      }
    };

</code

我想将此格式发送到main.js，在那里我导入了vue full caldendar并初始化了我的vue组件：

这里是main.js

  import FullCalendar from "vue-full-calendar";
    Vue.use(FullCalendar);

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

      start: event
      })
    })
            return {
              isVisible: true,
              events: customEvents,
              config: {
                defaultView: 'month',
                eventRender: function (event, element) {
                  console.log(event)
                },
                eventClick: (event) => {

                  this.selected = event;
                  console.log(event);
                  //router.push("myreports")
                },


                dayClick (date, event, view) {
                 // console.log(date, event, view)
                  console.log(date.format())
                  console.log(event);
                }


              },
              selected: {},

              methods: {
                refreshEvents() {
                  this.$refs.calendar.$emit('refetch-events')
                },
                eventSelected(event) {
                  this.selected = event;
                  console.log(event);
                },


              }
            }
          }

---

问题是vue显示了一个错误，即无法识别日期数组“ReferenceError:dates未在VueComponent.data（main.js？1c90:58）中定义”，在该数组中我存储了所有日期，因此我可以通过道具将它们传递给main，然后使用它们填充事件，以便突出显示每个日历上的日期。

如果执行

dates.forEach(（event）=>{

event看起来像什么？它像

{“回答日期”：[“2018-08-17”，“2018-08-22”，“2018-08-24”，“2018-08-25”]，“频道”：“testbot”，“projectId”：1，“projectName”：“test”}

如您所示？如果不是，则请显示正确的信息。如果是如您所示，则您不能简单地将整个事件指定为开始日期。您必须从其中的属性中选择一个日期。不清楚您将如何选择要使用的日期。是的，我同意，但主要问题是此错误：ReferenceError:日期不正确在VueComponent.data（main.js？1c90:58）中定义，它无法识别我传递给propsAh的数组。您之前没有提到确切的错误。我建议您将其编辑到问题中，以便更精确。不幸的是，我不是vue专家（我只知道fullCalendar），我真的不明白为什么会发生这种情况，但可能它的作用域不正确。也许有vue经验的人可以告诉你如何修复它。

日期的作用域不是词汇性的，它是在实例上，所以
this.dates.forEach
@eraldofgoli那么无论你在
日期中传递什么都是不正确的定义。因为
data（）
肯定可以通过这种方式访问道具，如下所示：
  import FullCalendar from "vue-full-calendar";
    Vue.use(FullCalendar);

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

      start: event
      })
    })
            return {
              isVisible: true,
              events: customEvents,
              config: {
                defaultView: 'month',
                eventRender: function (event, element) {
                  console.log(event)
                },
                eventClick: (event) => {

                  this.selected = event;
                  console.log(event);
                  //router.push("myreports")
                },


                dayClick (date, event, view) {
                 // console.log(date, event, view)
                  console.log(date.format())
                  console.log(event);
                }


              },
              selected: {},

              methods: {
                refreshEvents() {
                  this.$refs.calendar.$emit('refetch-events')
                },
                eventSelected(event) {
                  this.selected = event;
                  console.log(event);
                },


              }
            }
          }