axios 使用Vue3和Inertia渲染数据库中的事件

np8igboo  于 2022-11-05  发布在  iOS
关注(0)|答案(1)|浏览(209)

我有相当大的困难，让我的Laravel 9全日历5与Vue 3应用程序从数据库拉事件通过Vue 3。我假设我需要一些帮助，制定在index. vue的axios脚本。
这是我的索引.vue

<template>
    <head title="Dashboard" />
    <BreezeAuthenticatedLayout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Resource Calendar Timeline
            </h2>
        </template>
        <div class="py-12">
            <div class="max-w-10xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-12 bg-white border-b border-gray-200">
  <div class='demo-app'>
    <div class='demo-app-main'>
      <FullCalendar
        class='demo-app-calendar'
        :options='calendarOptions'
        :events='calendarEvents'>
        <template v-slot:eventContent='arg'>
          <b>{{ arg.timeText }}</b>
          <i>{{ arg.event.title }}</i>
        </template>
      </FullCalendar>
    </div>
  </div>
                    </div>
                </div>
            </div>
        </div>
    </BreezeAuthenticatedLayout>
</template>
<!--start calendar-->
<script setup lang='ts'>
import BreezeAuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { head, Link } from '@inertiajs/inertia-vue3';
import '@fullcalendar/core/vdom'; // solves problem with Vite
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
import interactionPlugin from '@fullcalendar/interaction';
import axios from 'axios';
</script>
<script lang='ts'>
export default {
  components: {FullCalendar},
  data() {
    return {
      calendarEvents:
          {
            url: 'show-events'
          },
      calendarOptions: {
        plugins: [
          dayGridPlugin,
          timeGridPlugin,
          resourceTimelinePlugin,
          listPlugin,
          interactionPlugin // needed for dateClick
        ],
        headerToolbar: {
          left: 'promptResource prev,next today',
          center: 'title',
          right: 'resourceMonth,dayGridMonth,timeGridWeek,timeGridDay,listMonth'
        },
        views: {
          resourceMonth: {
          type: 'resourceTimelineMonth',
          buttonText: 'personnel'
          }
        },
        customButtons: {
        promptResource: {
          text: '+ personnel',
          click: function() {
            var title = prompt('Name');
            if (title) {
              event.addResource({
                title: title
              });
            }
          }
        }
      },
      initialView: 'dayGridMonth',
      editable: true,
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        weekends: true,
        select: this.handleDateSelect,
        eventClick: this.handleEventClick,
        eventsSet: this.handleEvents
      } as CalendarOptions,
      currentEvents: [] as EventApi[],
    }
  },
  methods: {
    handleWeekendsToggle() {
      this.calendarOptions.weekends = !this.calendarOptions.weekends // update a property
    },
    handleDateSelect(selectInfo: DateSelectArg) {
      let title = prompt('Please enter a new title for your event')
      let calendarApi = selectInfo.view.calendar
      calendarApi.unselect() // clear date selection
      if (title) {
        calendarApi.addEvent({
          id: createEventId(),
          title,
          start: selectInfo.startStr,
          end: selectInfo.endStr,
          allDay: selectInfo.allDay
        })
      }
    },
    handleEventClick(clickInfo: EventClickArg) {
      if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
        clickInfo.event.remove()
      }
    },
    handleEvents(events: EventApi[]) {
      this.currentEvents = events
    },
  }
}
</script>

这是我的控制器

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Inertia\Inertia;
use App\Models\Appointment;
use App\Models\Booking;
use App\Models\Event;
use Illuminate\Support\Facades\Validator;

class AppointmentController extends Controller
{
    /**
     * Show the form for creating a new resource.
     *
     * @return Response
     */
    public function index()
    {

      {
          $events = array();
          $bookings = Event::all();
          foreach($bookings as $booking) {
              $color = null;
              if($booking->title == 'Test') {
                  $color = '#924ACE';
              }
              if($booking->title == 'Test 1') {
                  $color = '#68B01A';
              }

              $events[] = [
                  'id'   => $booking->id,
                  'title' => $booking->title,
                  'start' => $booking->start_date,
                  'end' => $booking->end_date,
                  'color' => $color
              ];
          }
          //return view('calendar.index', ['events' => $events]);
          return Inertia::render('Appointments/Index', ['events' => $events]);
      }
    }

    public function showEvents(Request $request) {
        $event = Event::get(['title','acronym','city','venue','value','start','end']);
        return response()->json(["events" => $event]);
    }

    public function getEvents(Request $request) {
      $events = array();
          $events = Event::all();
          foreach($events as $event) {
              $color = null;
              if($event->title == 'Test') {
                  $color = '#924ACE';
              }
              if($event->title == 'Test 1') {
                  $color = '#68B01A';
              }

              $events[] = [
                  'id'   => $event->id,
                  'title' => $event->event_name,
                  'start' => $event->start_date,
                  'end' => $event->end_date,
                  'color' => $color
              ];
          }
        return Inertia::render('Events/Index', ['events' => $events]);
      }

$events = array();
    $events = Event::all();
    foreach($events as $event) {
        $color = null;
        if($event->title == 'Test') {
            $color = '#924ACE';
        }
        if($event->title == 'Test 1') {
            $color = '#68B01A';
        }

        $events[] = [
            'id'   => $event->id,
            'title' => $event->event_name,
            'start' => $event->start_date,
            'end' => $event->end_date,
            'color' => $color
        ];
    }
  return Inertia::render('Events/Index', ['events' => $events]);
}

* /

    public function store(Request $request)
    {

        $assignee =
          ($request->assignee && auth()->user()->isAdmin ?
          $request->assignee :
          $assignee = auth()->user()->id)->get();

        $appointment = new Appointment([
          'start_date' => $request->start,
          'end_date' => $request->end,
          'event_name' => $request->title,
          'acronym' => $request->description,
          'user_id' => $assignee
        ]);

        $appointment->save();

        return $event;
    }

    public function filter(Request $request)
    {
        if (auth()->user()->isAdmin) {
          return Appointment::whereBetween('start', [$request->start, $request->end])
                  ->with('user:id,name,lastname')
                  ->get();
        } else {
          return Appointment::whereBetween('start', [$request->start, $request->end])
                  ->where('user_id', auth()->user()->id)
                  ->get();
        }
    }

    public function update(Request $request, Appointment $appointment)
    {
        $user = auth()->user();
        if ($appointment->user_id === $user->id || $user->isAdmin) {
          $appointment->update($request->all());
        } else {
          abort(403);
        }
    }

    public function destroy(Appointment $appointment)
    {
      $user = auth()->user();
      if ($appointment->user_id === $user->id || $user->isAdmin) {
        $appointment->delete();
      } else {
        abort(403);
      }
    }
}

这是我试图从“show-events”端点拉入的事件的JSON输出

{"events":[{"title":"Test","acronym":"TST","city":"Denver","venue":"Ceavco","value":"$0","start":"2022-10-10 00:00:00","end":"2022-10-28 00:00:00"},{"title":"Test 2","acronym":"TST2","city":"boston","venue":"AVFX","value":"$0","start":"2022-10-05 00:00:00","end":"2022-10-07 00:00:00"}]}

我错过了什么？
方法或Vue元素上的导出中有什么问题？

axios

1条答案

按热度按时间
njthzxwz

njthzxwz1#

感谢你们两个引导我在正确的方向。我设法让它与以下索引工作。vue：

<script setup lang='ts'>
import BreezeAuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { head, Link } from '@inertiajs/inertia-vue3';
import '@fullcalendar/core/vdom'; // solves problem with Vite
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
import interactionPlugin from '@fullcalendar/interaction';
import axios from 'axios';
import { INITIAL_EVENTS, createEventId } from '@/components/event-utils.ts';
// import { INITIAL_RESOURCES, createResourceId } from '@/components/resource-utils.ts';
</script>
<script lang='ts'>
export default {
  components: {FullCalendar},
  data() {
    return {
      calendarOptions: {
        plugins: [
          dayGridPlugin,
          timeGridPlugin,
          resourceTimelinePlugin,
          listPlugin,
          interactionPlugin // needed for dateClick
        ],
        events: [],
        headerToolbar: {
          left: 'promptResource prev,next today',
          center: 'title',
          right: 'resourceMonth,dayGridMonth,timeGridWeek,timeGridDay,listMonth'
        },
        views: {
          resourceMonth: {
          type: 'resourceTimelineMonth',
          buttonText: 'personnel'
          }
        },
        customButtons: {
        promptResource: {
          text: '+ personnel',
          click: function() {
            var title = prompt('Name');
            if (title) {
              event.addResource({
                title: title
              });
            }
          }
        }
      },
      initialView: 'resourceTimelineMonth',
      editable: true,
},
  created() {
            this.getEvents();
        },
  methods: {
    getEvents() {
      axios.get('show-events')
        .then(response => {
            this.calendarOptions.events = response.data.events;
            });
        },
}
</script>
赞(0）分享  回复(0）举报  2022-11-05
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com