I just started a new project with Laravel 10, InertiaJS and Vue3.
I set up two simple models, Blog and Listings. Since this is my first project with Inertia and Vue, I created the blog from a tutorial(for the frame of reference). All CRUD resource routes for blog work as they should. So I generated all listings resources to mirror blog. The only routes that work for listings are index, create and store–I get a 404 error on the edit and destroy routes. I am out of ideas.
debug-bar error when trying to edit or delete a listing
...
No query results for model [AppModelsListing] 1
...
web.php
...
Route::resource('stories',StoryController::class); (my blog routes)
Route::resource('listings',ListingController::class);
...
ListingsController.php
...
public function edit(Listing $listing)
{
return Inertia::render(
'Listings/Edit',
[
'listing' => $listing
]
);
}
...
public function destroy(Listing $listing)
{
$listing->delete();
sleep(1);
return redirect()->route('listings.index')->with('message', 'Listing Delete Successfully');
}
Listings/Index.vue
<script setup>
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import PrimaryButton from "@/Components/PrimaryButton.vue";
import { Head, Link, useForm } from "@inertiajs/vue3";
const props = defineProps({
listings: {
type: Object,
default: () => ({}),
},
});
const form = useForm({});
function destroy(id) {
if (confirm("Are you sure you want to Delete")) {
form.delete(route("listings.destroy", id));
}
}
</script>
<template>
<Head title="Listings" />
<AuthenticatedLayout>
<template #header>
<h2 class="text-xl font-semibold leading-tight text-gray-800">
Listings Index
</h2>
</template>
<div class="py-12">
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
<div class="mb-2">
<Link :href="route('listings.create')">
<PrimaryButton>Add Listing</PrimaryButton>
</Link>
</div>
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3">#</th>
<th scope="col" class="px-6 py-3">
Author
</th>
<th scope="col" class="px-6 py-3">
Title
</th>
<th scope="col" class="px-6 py-3">
Edit
</th>
<th scope="col" class="px-6 py-3">
Delete
</th>
</tr>
</thead>
<tbody>
<tr v-for="listing in listings" :key="listing.id"
class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row"
class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
{{ listing.id }}
</th>
<th scope="row"
class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
{{ listing.user.first_name }} {{ listing.user.last_name }}
</th>
<th scope="row"
class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
{{ listing.title }}
</th>
<td class="px-6 py-4">
<Link :href="route('listings.edit', listing.id)
" class="px-4 py-2 text-white bg-blue-600 rounded-lg">Edit</Link>
</td>
<td class="px-6 py-4">
<PrimaryButton class="bg-red-700" @click="destroy(listing.id)">
Delete
</PrimaryButton>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</AuthenticatedLayout>
</template>
2
Answers
Found answer here
Changed
To
Not sure why my
blogresources worked fine without these changes.Not sure if this is the problem, but you’re using named routes for the edit and delete and the resource in the routes.php does not have a name() method.
Try adding the name method to the route. Or, alternatively, you could try specifying the full route (without using the route() function) in your links.