Fatal编程技术网
  • javascript/
  • Javascript 从MySQL获取并显示Vue.js Fullcalendar上的事件

Javascript 从MySQL获取并显示Vue.js Fullcalendar上的事件

javascript mysql laravel vue.js

Javascript 从MySQL获取并显示Vue.js Fullcalendar上的事件,javascript,mysql,laravel,vue.js,vue-component,Javascript,Mysql,Laravel,Vue.js,Vue Component,我想从MySQL数据库中检索我的事件，并将其发送到我的Vue组件，以便相应地在FullCalendar组件上显示事件。尽管它作为一个完整的HTML文档填充我的事件数组 这是我的事件控制器 public function getEvents() { $getEvents = Event::query()->select('projectid','event_id','start_time','end_time','notes','taskid')->get(); $ev

我想从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();
}
My 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>
My blade.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  .........

“\r\n\r\n\r\n\r\n\r\n。。。。。。。。。
问题在于
路由（'/event'）
。已经存在具有该名称的路由

下面是获取事件并将其显示在日历上的代码

路线：

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>


从“@FullCalendar/vue”导入FullCalendar
从“@fullcalendar/timegrid”导入timeGridPlugin
从“@fullcalendar/interaction”导入interactionPlugin
从“axios”导入axios
导出默认值{
组成部分：{
日历
},
道具：{}，
数据（）{
返回{
日历选项：{
插件：[timeGridPlugin，interactionPlugin]，
initialView:“timeGridWeek”，
周末：错，
是的，
事件单击：this.handleEventClick，
dateClick:this.handleDateClick，
事件：[]
},
}
},
计算：{}，
方法：{
handleEventClick:函数（参数）{
警报（'Event'+Event.title）
},
HandleDate单击：函数（参数）{
},
getEvents:函数（）{
这是.http.get（'/event'）。然后（（响应）=>{
控制台日志（响应）；
this.calendarOptions.events=response.data；
}，（错误）=>{
})
}
},
安装的（）{
this.events=this.getEvents（）；
},
}
home.blade.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>

     <v-card>
        <v-layout row wrap>
            <v-flex>
                <full-calendar></full-calendar>
            </v-flex>
        </v-layout>
    </v-card>
看起来laravel从你的控制器返回的不仅仅是JSON。这就是问题所在吗？你需要使用来发送JSON，并且只发送JSON。我认为
事件
字段应该是
日历选项
的属性。这就是问题所在。是的，它发送整个html、脚本等，而不是我从t收到的JSON数据他发现我正确地检索了我的事件，尽管它没有将json数据放在我在
数据（）中声明的
事件[]
中。如果我运行
控制台.log（this.events）
，事件显示正确