Courses

Vue Laravel 12 Starter Kit: CRUD Project

Edit Form and Breadcrumbs

Summary of this lesson:
- Adding "Edit" button to tasks table
- Building task editing form with checkbox for completion status
- Implementing form submission with proper error handling
- Adding breadcrumbs for improved navigation

Now, let's build the page to edit the task. It will be structurally similar to the Create form but with a few differences.

Also, at the end of this lesson, we will add breadcrumbs above the table.

Table: Link to Edit Route

We need to add the "Edit" button to the table.

<TableRow v-for="task in tasks" :key="task.id">
    <TableCell>{{ task.name }}</TableCell>
    <TableCell :class="{ 'text-green-600': task.is_completed, 'text-red-700': !task.is_completed }">
        {{ task.is_completed ? 'Completed' : 'In Progress' }}
    </TableCell>
    <TableCell class="text-right">// [tl! --]
    <TableCell class="flex gap-x-2 text-right">// [tl! ++]
        <Link :class="buttonVariants({ variant: 'default' })" :href="`/tasks/${task.id}/edit`">Edit </Link>// [tl! ++]
        <Button variant="destructive" @click="deleteTask(task.id)" class="mr-2">Delete </Button>
    </TableCell>
</TableRow>

Here's the visual result:

Edit Page: Vue Component

The previous code snippet above shows the URL /tasks/${task.id}/edit. This corresponds to the Controller method edit(), which uses...

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

You also get:

  • 73 courses
  • Premium tutorials
  • Access to repositories
  • Private Discord