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