Question

我正在建立一个包含多个日历的网页。在我的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

我从数据库中获取所有项目和日期的格式是：

 [
    {
        "answeredDates": [
            "2018-08-17",
            "2018-08-22",
            "2018-08-24",
            "2018-08-25"
        ],
        "channel": "testbot",
        "projectId": 1,
        "projectName": "test"
    },
    {
        "answeredDates": [
            "2018-08-22"
        ],
        "channel": "testbot",
        "projectId": 2,
        "projectName": "test2"
    },
    {
        "answeredDates": [],
        "channel": "testbot",
        "projectId": 3,
        "projectName": "test3"
    }
]

我想将此格式发送到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：VueComponent.data中未定义日期（main.js？1c90：58）”，我在其中存储了所有日期，因此我可以通过道具将它们传递给主体，然后使用它们填充事件以突出显示每个日历上的日期。

Vue.js使用道具将数据传递到vue-full-calendar

0 个答案: