Laravel Inertia js & vue js - php

Question

I am trying to make a delete button for my Laravel 8 app. I got some errors while doing that and don't know how to do it.
My app is about creating training courses for students and for each training course they will get a YouTube video created by an admin and I am trying to add the delete formation function.
That is my controller I tried to create a delete function. My update, create functions work fine but the delete doesn't work and I get the following error message:
[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'course' of undefined"
![Error message screenshot][1]
<?php
namespace App\Http\Controllers;
use App\Models\User;
use Inertia\Inertia;
use App\Models\Course;
use App\Models\Episode;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Http;
use Illuminate\Support\Facades\Redirect;
use Illuminate\Database\Eloquent\Builder;
use App\Http\Requests\StoreCourseWithEpisodes;
class CourseController extends Controller
{
public function index()
{
$courses = Course::with('user')
->select('courses.*', DB::raw(
'(SELECT COUNT(DISTINCT(user_id))
FROM completions
INNER JOIN episodes ON completions.episode_id = episodes.id
WHERE episodes.course_id = courses.id
) AS participants'
))->addSelect(DB::raw(
'(SELECT SUM(duration)
FROM episodes
WHERE episodes.course_id = courses.id
) AS total_duration'
))
->withCount('episodes')->latest()->paginate(5);
return Inertia::render('Courses/Index', [
'courses' => $courses
]);
}
public function show(int $id)
{
$course = Course::where('id', $id)->with('episodes')->first();
$watched = auth()->user()->episodes;
return Inertia::render('Courses/Show', [
'course' => $course,
'watched' => $watched
]);
}
public function store(StoreCourseWithEpisodes $request)
{
$user_id = \Auth::user()->id;
$course = Course::create($request->all());
foreach($request->input('episodes') as $episode)
{
$episode['course_id'] = $course->id;
Episode::create($episode);
}
return Redirect::route('courses.index')->with('success', 'Félicitations, votre formation a bien été postée.');
}
public function edit(int $id)
{
$course = Course::where('id', $id)->with('episodes')->first();
$this->authorize('update', $course);
return Inertia::render('Courses/Edit', [
'course' => $course
]);
}
public function update(StoreCourseWithEpisodes $request)
{
$course = Course::where('id', $request->id)->first();
$this->authorize('update', $course);
$course->update($request->all());
$course->episodes()->delete();
foreach($request->episodes as $episode) {
$episode['course_id'] = $course->id;
Episode::create($episode);
}
return Redirect::route('courses.index')->with('success', 'Félicitations, votre formation a bien été modifiée.');
}
public function toggleProgress(Request $request)
{
$id = $request->input('episodeId');
$user = auth()->user();
$user->episodes()->toggle($id);
return $user->episodes;
}
public function delete(StoreCourseWithEpisodes $request ,$id)
{
$course = Course::find($id);
$course->episodes()->delete();
// $request->has('id') ?
// Article::find($request->input('id'))->delete() :
// redirect()->back()
// ->with('errors', 'Attentions.');
return Redirect::route('courses.index')->with('success', 'Félicitations, votre formation a bien été supprimer.');
}
}
That is my vue where I have to call my delete function:
<template>
<app-layout>
<template #header>
Liste des formations
</template>
<section class="py-6">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div v-if="$page.flash.success" class="bg-green-200 text-green-600 p-4">
{{ $page.flash.success }}
</div>
<div class="py-3" v-for="course in courses.data" v-bind:key="course.id">
<div class="bg-white rounded shadow p-4">
<div class="text-sm text-gray-500 flex justify-between items-center">
<div>
Mise en ligne par <strong>{{ course.user.name }}</strong> (<span class="text-gray-500 text-sm">{{ course.participants }} participant<span v-if="parseInt(course.participants) > 1 ">s</span>)
</span>
</div>
<span class="block text-sm text-gray-400">{{ course.episodes_count }} épisode<span v-if="course.episodes_count > 1">s</span></span>
</div>
<h1 class="text-3xl">{{ course.title }}</h1>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">
{{ convert(course.total_duration) }}</span>
<div class="text-sm text-gray-500 mt-2">{{ course.description }}</div>
<div class="flex justify-between items-center">
<a :href="'course/' + course.id" class="bg-indigo-700 text-white px-3 py-2 text-sm mt-3 inline-block rounded hover:bg-indigo-500">Voir la formation</a>
<a :href="'courses/edit/' + course.id" v-if="course.update" class="bg-gray-700 text-white px-3 py-2 text-sm mt-3 inline-block rounded hover:bg-gray-500">Editer</a>
<button #click="remove(course.id)"
class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
Supprimer
</button>
</div>
</div>
</div>
<inertia-link :href="link.url" class="text-indigo-700 border-gray-500 p-5" v-for="link in courses.links" v-bind:key="link.label">
<span v-bind:class="{'text-red-700' : link.active}">{{ link.label }}</span>
</inertia-link>
</div>
</section>
</app-layout>
</template>
<script>
import AppLayout from './../../Layouts/AppLayout';
export default {
components: {
AppLayout
},
props: ['courses'],
data() {
return {
courseData: this.courses
}
},
methods: {
remove() {
this.$inertia.delete('/courses/delete/'+ this.courseData.id, this.courseData);
},
// deleteRow(id) {
// this.$inertia.delete('/article/delete/' + id)
// },
convert(timestamps) {
let hours = Math.floor(timestamps / 3600);
let minutes = Math.floor(timestamps / 60) - (hours * 60);
let seconds = timestamps % 60;
return hours.toString().padStart(2, 0) + ':' + minutes.toString().padStart(2, 0) + ':' + seconds.toString().padStart(2, 0);
}
}
}
</script>
[enter image description here][2]
here is my vue with no error but my delete button still does not work
<template>
<app-layout>
<template #header>
Liste des formations
</template>
<section class="py-6">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div v-if="$page.flash.success" class="bg-green-200 text-green-600 p-4">
{{ $page.flash.success }}
</div>
<div class="py-3" v-for="course in courses.data" v-bind:key="course.id">
<div class="bg-white rounded shadow p-4">
<div class="text-sm text-gray-500 flex justify-between items-center">
<div>
Mise en ligne par <strong>{{ course.user.name }}</strong> (<span class="text-gray-500 text-sm">{{ course.participants }} participant<span v-if="parseInt(course.participants) > 1 ">s</span>)
</span>
</div>
<span class="block text-sm text-gray-400">{{ course.episodes_count }} épisode<span v-if="course.episodes_count > 1">s</span></span>
</div>
<h1 class="text-3xl">{{ course.title }}</h1>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">
{{ convert(course.total_duration) }}</span>
<div class="text-sm text-gray-500 mt-2">{{ course.description }}</div>
<div class="flex justify-between items-center">
<a :href="'course/' + course.id" class="bg-indigo-700 text-white px-3 py-2 text-sm mt-3 inline-block rounded hover:bg-indigo-500">Voir la formation</a>
<a :href="'courses/edit/' + course.id" v-if="course.update" class="bg-gray-700 text-white px-3 py-2 text-sm mt-3 inline-block rounded hover:bg-gray-500">Editer</a>
<button #click="remove()"
class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
Supprimer
</button>
</div>
</div>
</div>
</div>
</section>
</app-layout>
</template>
<script>
import AppLayout from './../../Layouts/AppLayout';
export default {
components: {
AppLayout
},
props: ['courses'],
data() {
return {
courseData: this.courses
}
},
methods: {
remove(id) {
this.$inertia.delete('/courses/delete/'+ id);
},
// deleteRow(id) {
// this.$inertia.delete('/article/delete/' + id)
// },
convert(timestamps) {
let hours = Math.floor(timestamps / 3600);
let minutes = Math.floor(timestamps / 60) - (hours * 60);
let seconds = timestamps % 60;
return hours.toString().padStart(2, 0) + ':' + minutes.toString().padStart(2, 0) + ':' + seconds.toString().padStart(2, 0);
}
}
}
</script>
and my controller right here
<?php
namespace App\Http\Controllers;
use App\Models\User;
use Inertia\Inertia;
use App\Models\Course;
use App\Models\Episode;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Http;
use Illuminate\Support\Facades\Redirect;
use Illuminate\Database\Eloquent\Builder;
use App\Http\Requests\StoreCourseWithEpisodes;
class CourseController extends Controller
{
public function index()
{
$courses = Course::with('user')
->select('courses.*', DB::raw(
'(SELECT COUNT(DISTINCT(user_id))
FROM completions
INNER JOIN episodes ON completions.episode_id = episodes.id
WHERE episodes.course_id = courses.id
) AS participants'
))->addSelect(DB::raw(
'(SELECT SUM(duration)
FROM episodes
WHERE episodes.course_id = courses.id
) AS total_duration'
))
->withCount('episodes')->latest()->paginate(5);
return Inertia::render('Courses/Index', [
'courses' => $courses
]);
}
public function show(int $id)
{
$course = Course::where('id', $id)->with('episodes')->first();
$watched = auth()->user()->episodes;
return Inertia::render('Courses/Show', [
'course' => $course,
'watched' => $watched
]);
}
public function store(StoreCourseWithEpisodes $request)
{
$user_id = \Auth::user()->id;
$course = Course::create($request->all());
foreach($request->input('episodes') as $episode)
{
$episode['course_id'] = $course->id;
Episode::create($episode);
}
return Redirect::route('courses.index')->with('success', 'Félicitations, votre formation a bien été postée.');
}
public function edit(int $id)
{
$course = Course::where('id', $id)->with('episodes')->first();
$this->authorize('update', $course);
return Inertia::render('Courses/Edit', [
'course' => $course
]);
}
public function update(StoreCourseWithEpisodes $request)
{
$course = Course::where('id', $request->id)->first();
$this->authorize('update', $course);
$course->update($request->all());
$course->episodes()->delete();
foreach($request->episodes as $episode) {
$episode['course_id'] = $course->id;
Episode::create($episode);
}
return Redirect::route('courses.index')->with('success', 'Félicitations, votre formation a bien été modifiée.');
}
public function toggleProgress(Request $request)
{
$id = $request->input('episodeId');
$user = auth()->user();
$user->episodes()->toggle($id);
return $user->episodes;
}
public function delete(StoreCourseWithEpisodes $request ,$id)
{
// dd($id);
Course::find($id)->delete();
// $course->episodes()->delete();
// $request->has('id') ?
// Article::find($request->input('id'))->delete() :
// redirect()->back()
// ->with('errors', 'Attentions.');
return Redirect::route('courses.index')->with('success', 'Félicitations, votre formation a bien été supprimer.');
}
}