Laravel 9 CRUD with Vue JS 3 – Part 2 (Update Action)

In this article, we will continue building our Laravel 9 CRUD application with Vue JS 3. In the previous article, we covered the basic setup and create action. Now, we will focus on the update action.

Update Action

Updating existing data is an essential part of any CRUD application. In this section, we will implement the update action using Laravel and Vue JS.

Backend (Laravel)

First, let’s define the backend logic for updating data in our Laravel application. We will create a new route and controller method to handle the update action.

“`php
// routes/web.php

use AppHttpControllersItemController;

Route::resource(‘items’, ItemController::class);

“`

“`php
// app/Http/Controllers/ItemController.php

use AppModelsItem;
use IlluminateHttpRequest;

public function update(Request $request, Item $item)
{
$item->update($request->all());

return response()->json($item, 200);
}

“`

Frontend (Vue JS)

Now, let’s move on to the frontend part of our application. We will create a form for updating existing data and handle the submission using Vue JS.

“`html

“`

Conclusion

Congratulations! You have successfully implemented the update action in your Laravel 9 CRUD application with Vue JS 3. You now have a fully functional CRUD application that allows you to create, read, update, and delete data.

In the next part of this series, we will cover the delete action. Stay tuned!