从 MySQL 获取和显示 Vue.js Fullcalendar 上的事件
Posted
技术标签:
【中文标题】从 MySQL 获取和显示 Vue.js Fullcalendar 上的事件【英文标题】：Get and Display events on Vue.js Fullcalendar from MySQL 【发布时间】：2021-06-06 04:08:51 【问题描述】：我想从我的 mysql 数据库中检索我的事件，并将其发送到我的 Vue 组件以相应地在 FullCalendar 组件上显示这些事件。虽然它将我的事件数组填充为完整的 html 文档。
这是我的事件控制器
public function getEvents()
$getEvents = Event::query()->select('projectid','event_id','start_time','end_time','notes','taskid')->get();
$events = [];
foreach ($getEvents as $values)
$event = [];
$event['eventid'] = $values->event_id;
$event['projectid'] = $values->projectid;
$event['start_time'] = $values->start_time;
$event['end_time'] = $values->end_time;
$event['notes'] = $values->notes;
$event['taskid'] = $values->taskid;
$events[] = $event;
return json_encode($events);
//return $event->project()->get()->pluck('eventid')->toArray();
我的 FullCalendar.vue 组件
<template>
<FullCalendar
ref="fullCalendar"
:options="calendarOptions"
color="primary"
:events="getEvents"
:type="type"
v-model="query"
></FullCalendar>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import axios from 'axios'
export default
components:
FullCalendar // make the <FullCalendar> tag available
,
props: ,
data()
return
events: [],
calendarOptions:
plugins: [timeGridPlugin, interactionPlugin],
initialView: 'timeGridWeek',
weekends: false,
eventClick: this.handleEventClick,
,
,
computed: ,
methods:
handleEventClick: function (arg)
alert('Event: ' + arg.events);
,
getEvents: function ()
this.$http.get('/events', data: query: this.query).then((response) =>
this.events = response.data;
console.log(this.events);
, (error) =>
)
,
mounted()
this.getEvents();
,
</script>
<style scoped>
</style>
我的路线
Route::get('/events', 'EventController@getEvents')->name('event.getEvents');
我的刀片.php
<v-card>
<v-layout row wrap>
<v-flex>
<v-btn color="primary" dark @click="newEventDialog = true">
New Event
</v-btn>
<full-calendar></full-calendar>
</v-flex>
</v-layout>
</v-card>
这填充了我的事件数组：
"<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"utf-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n .........
【问题讨论】：
看起来 laravel 从你的控制器返回的不仅仅是 JSON。这就是问题所在吗？您需要使用this 发送 JSON，并且只能使用 JSON。 我认为events 字段应该是calendarOptions 的属性
这就是问题所在，它发送整个 html、脚本等。而不是我从控制器收到的 json 数据
我发现我正确地检索了我的事件，尽管它没有将 json 数据放在我在data() 中声明的events[] 中。如果我运行console.log(this.events)，事件显示正确
【参考方案1】：
问题是Route('/event') 。已存在具有该名称的路线。
这是获取事件并将其显示在https://fullcalendar.io 日历上的代码。
路线：
Route::get('/event', 'EventController@getEvents');
事件控制器：
public function getEvents()
$getEvents = Event::query()->select('projectid',
'eventid',
'start_time',
'end_time',
'notes',
'taskid')
->get();
$events = [];
foreach ($getEvents as $values)
$event = [];
$startTime = Carbon::parse($values->start_time)->format("Y-m-d H:s");
$endTime = Carbon::parse($values->end_time)->format("Y-m-d H:s");
$startTime = Carbon::parse($startTime)->timezone("Africa/Windhoek");
$endTime = Carbon::parse($endTime)->timezone("Africa/Windhoek");
$values->start_time = $startTime;
$values->end_time = $endTime;
$event['id'] = $values->eventid;
$event['title'] = $values->notes;
$event['start'] = $values->start_time;
$event['end'] = $values->end_time;
$event['allDay'] = false;
$events[] = $event;
return response()->json($events);
FullCalendar.vue
<template>
<FullCalendar ref="fullCalendar" :options="calendarOptions" :events="event"/>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import axios from 'axios'
export default
components:
FullCalendar
,
props: ,
data()
return
calendarOptions:
plugins: [timeGridPlugin, interactionPlugin],
initialView: 'timeGridWeek',
weekends: false,
editable:true,
eventClick: this.handleEventClick,
dateClick:this.handleDateClick,
events: []
,
,
computed: ,
methods:
handleEventClick: function (arg)
alert('Event' + event.title)
,
handleDateClick: function (arg)
,
getEvents: function ()
this.$http.get('/event').then((response) =>
console.log(response);
this.calendarOptions.events = response.data;
, (error) =>
)
,
mounted()
this.events = this.getEvents();
,
</script>
<style scoped>
</style>
home.blade.php
<v-card>
<v-layout row wrap>
<v-flex>
<full-calendar></full-calendar>
</v-flex>
</v-layout>
</v-card>
【讨论】：
以上是关于从 MySQL 获取和显示 Vue.js Fullcalendar 上的事件的主要内容，如果未能解决你的问题，请参考以下文章