Courses

Vue Inertia + Laravel 11: From Scratch

Edit Form with Passing Props

Summary of this lesson:
- Creating edit form functionality
- Passing props to form components
- Handling form updates
- Implementing edit redirects

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...

The full lesson is only for Premium Members.
Want to access all 18 lessons of this course? (56 min read)

You also get:

  • 69 courses (majority in latest Laravel 11)
  • Premium tutorials
  • Access to repositories
  • Private Discord