Let's finish our CRUD with the edit functionality.
Let's add a link near the Delete button, which will go to the Edit page.
resources/js/Pages/Posts/Index.vue:
// ... <template>// ...<td class="px-6 py-4 text-sm leading-5 text-gray-900 whitespace-no-wrap"> <Link :href="route('posts.edit', post.id)" class="mr-2 inline-block rounded-md bg-blue-500 px-3 py-2 text-xs font-semibold uppercase tracking-widest text-white shadow-sm"> Edit </Link> <button @click="destroy(post.id)" type="button" class="rounded-md bg-red-600 px-3 py-2 text-xs font-semibold uppercase tracking-widest text-white shadow-sm"> Delete </button></td>// ...
We don't need to add a Laravel route because we have a resource route for the posts. We only need the methods in the Controller.
app/Http/Controllers/PostController.php:
class PostController extends Controller{ // ... public function edit(Post $post) { return Inertia::render('Posts/Edit', compact('post')); } public function update(Post $post, StorePostRequest $request) { $post->update($request->validated()); return redirect()->route('posts.index') ->with('message', 'Post updated successfully'); } // ...}The Vue component for the Edit page will be similar to the Create component.
Instead of post, the form action method will be put with a route to posts.update, and we will pass the post ID. The post itself is passed to the Vue component as a prop. The form values will be defined from the post object.
Copy the Create form and adjust only the highlighted code.
resources/js/Pages/Posts/Edit.vue:
<script setup>import AppLayout from '../../Layouts/App.vue';import { Head, Link, useForm } from '@inertiajs/vue3'; const props = defineProps({ post: { type: Object, required: true }}) const form = useForm(props.post) </script> <template> <Head title="Edit Post" /> <AppLayout> <form @submit.prevent="form.put(route('posts.update', post.id))"> // ... </AppLayout></template>We should have the data in the edit form.
After editing the post and saving, we are again redirected to the post table with an SPA feeling and can see the message and edited post.
The edit form is almost identical to the create form with a difference in how you pass the parameters and how you submit the form with form.put instead of form.post.