Short tutorials, tech tips and quick solutions for some of the real world matters faced by software developers.
Edit items in Has Many relationship with Laravel Livewire
I’m new to Livewire and still trying to figure out how to do certain things I
used to do with the .blade files. It was bit confusing how to edit and save the
data in a relationship along with the main entity inside a Livewire component.
This is how I got it resolved.
I’m developing an order management application. Each order has one or more
order items. The Order Component takes care of creating and
editing the orders. Let’s start with adding the required properties.
Here $order holds our Order object and $items is a
collection of order items.
The next thing is to initialize the component data. If an id is
passed, Order Component should load the respective order from
the database, or start with a new order otherwise.
Note that, I had to call my Order model OrderModel because otherwise
it makes a name conflict with the component class name, which is also called
The most important thing here to notice is that we are converting the
OrderItem objects to arrays. You only need to extract editable
fields and id into the array. Note that I have added an extra field
deleted which we will need to mark deleted items. This is useful
when we save the items back to the database.
Editing & Validating
Editing the properties of the order entity is
straightforward, For example, you may use the following code snippet to edit
customer_name property of the Order. Notice that
how it displays the validation errors right below the input element.
Editing order items is not that easy. I started by adding the necessary validation
rules to the Order Component.
We have multiple items per order, so the validation rule should work for each
item in the collection. Note in the above code how this can be achieved by writing
the validation rule like items.*.name.required.
Every time something is changed, it should be validated. We can use the
updated() event handler of the component to do this task.
Each item in the items collection needs a set of input fields for
editing their properties. However we don’t need to show the input fields for
deleted items. In order to get only the active (non-deleted) items, we can use
a computed property.
Then, the input fields can be generated using this computed property in a loop.
Note how it shows the validation errors right below the respective input field.
Also every row has a Remove button to remove the particular
item from the collection.
Add New Item
Adding a new item to the items collection can be done with a button click.
Here is the respective function in component.
We add a new item to the items collection with the default values
allowing the user to adjust them necessarily. So each time the
Add More button is pressed, a new items is added to the list
and the respective input fields are displayed on the form. Though we add items
they are not saved to the database yet. We come to that later.
Here is the removeItem() function, which removes an item from the
We have to deal with two types of items, new and existing.
If the id is not set we simply remove the item from collection.
When the id is set, item is and existing item in the db. So we simply mark
it as deleted. The actual deletion would take place when the items are saved
to database later.
Importantly, still we are not saving anything to the database. We only mark the
deleted items at this point with the intention of actually removing them from
the database later.
Here comes the final but most important part, saving data to database. All input
fields are enclosed withing a <form> tag which calls the
save() function on submit.
And, here is our save() function.
Note how it processes the items in items collection.
If the $item['id'] is empty, this is a new item. Create it and
link to the order.
When the $item['id'] is not empty, either we have to delete them from the
db if they are marked as deleted, or, update the details.
And, that’s all. The collection of items is nicely edited and updated this way.
This might not be the only way to edit and update a list of items in a
Has Many relationship with Livewire. Share how you did it in the