Vue.js передает данные с помощью реквизита в vue-full-calendar - PullRequest
0 голосов
/ 29 августа 2018

Я создаю веб-страницу, которая состоит из нескольких календарей. В моей базе данных 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:

Вот главный.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)», в котором я храню все даты, поэтому я могу передать их на главную через реквизиты, а затем использовать их для заполнения событий, чтобы выделить даты в каждом календаре.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...