从 MySQL 获取和显示 Vue.js Fullcalendar 上的事件答案

【问题标题】：Get and Display events on Vue.js Fullcalendar from MySQL从 MySQL 获取和显示 Vue.js Fullcalendar 上的事件
【发布时间】：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)，事件显示正确

标签： javascript mysql laravel vue.js vue-component

【解决方案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>

【讨论】：