Pass Data dari Controller ke Custom Component - Laravel Splade

Splade memudahkan kita untuk membangukan Page Applications (SPA) menggunakan standard Laravel Blade template dan juga Vue 3 Component. Anda boleh rujuk https://splade.dev/ untuk maklumat lanjut.

Dalam contoh ini, sistem akan membaca data dari database yang akan dipaparkan pada Custom Componen Calendar

 <?php  
 // app\Http\Controllers\CalendarController.php  
 public function index()  
 {  
   $events = Calendar::all()->map(function ($item, $key) {  
     return ['title' => $item->desc,        'start' => $item->start_slot,        'end' => $item->end_slot];  
   })->toJson();  
   return view('calendar.index', compact('events'));  
 }  

 <!-- resources\views\Calendar\index.blade.php -->  
 <x-layout>  
   <x-slot name="header"> {{ __('Dashboard') }} </x-slot> {{ $events }} <x-panel>  
     <Calendar events="{{ $events }}" />  
   </x-panel>  
 </x-layout>  
 <script setup>  
   import FullCalendar from "@fullcalendar/vue3"  
   import dayGridPlugin from "@fullcalendar/daygrid"  
   import timeGridPlugin from "@fullcalendar/timegrid"  
   import interactionPlugin from "@fullcalendar/interaction"  
   import {  
     inject  
   } from "vue"  
   import {  
     reactive  
   } from "vue"  
   const props = defineProps({  
       events: String,  
     }) const Splade = inject("$splade") const calendarOptions = reactive({  
             plugins: [dayGridPlugin, timeGridPlugin,  
                 interactionPlugin, // needed for dateClick    ],    headerToolbar: {      left: "prev,next today",      center: "title",      right: "dayGridMonth,timeGridWeek,timeGridDay",    },    initialView: "dayGridMonth",    selectable: true,    weekends: true,    // https://fullcalendar.io/docs/dateClick    dateClick: function (info) {      console.log(info.dateStr, info.view.type)      // https://stackoverflow.com/questions/27961647/fullcalenday-clicking-day-change-to-agenda-view-of-that-particular-date      if (info.view.type == "dayGridMonth") {        this.changeView("timeGridWeek")      }      // change the day's background color just for fun    },    select: (args) => {      Splade.modal("http://booking.test/booking/create?start=" + args.startStr)      console.log(args.startStr)    },    selectConstraint: "lesson-available",    events: JSON.parse(props.events)  })  
 </script><template>  
   <div>  
     <FullCalendar :options="calendarOptions" />  
   </div>  
 </template>  

Gunakan JSON.parse(props.events) untuk tukarkan data dari String ke Javascript Object