[Live-coding] Laravel Livewire: Parent-Child Form Example

Livewire is great for interactivity in forms, let me show you an example with an order-products form.
0:00 Intro: About Project
1:04 Philosophy: Why Livewire vs jQuery/Vue
2:52 Live-Coding Begin: Starting Point
5:14 Installing/Enabling Livewire: "Hello"
7:08 Livewire Component with Properties Mount
9:40 Add Product Button: Wire-Click
12:09 Delete Product: Method with Parameter
13:37 Wire-Model: Binding Data
14:53 How/When Data is Refreshed
16:11 Final Testing and Conclusion
Repository: github.com/LaravelDaily/Livew...
Related links:
- "Older" version: Master-Detail Form in Laravel + jQuery: Create Order With Products quickadminpanel.com/blog/mast...
- Laravel Pivot Tables: Simple to Advanced Many-to-Many [VIDEO] • Laravel Pivot Tables: ...
- - - - -
Try our Laravel QuickAdminPanel: bit.ly/quickadminpanel
Enroll in my Laravel courses: laraveldaily.teachable.com

[@beef3379]

This is so useful to me right now. Thank you! Looking forward to validation / more livewire form videos

[@SebastianMares]

Just came across your channel and find it really helpful so far, so thanks and keep it up! 😊

[@marwanfallaha3642]

I'm a new subscriber, I regret that I did not know this channel before. Thank you Mr. Povilas

[@user-mw1um3yx5o]

Many thanks!!! Continue to develop this topic

[@aisalen]

You are the best! Always have the desires of helping others Laravel developer.

[@trueyolu1906]

This video is so awesome! Thank you for your work!!!

[@AbrarAhmad-mz8vl]

Its been since months while I'm using Livewire in all projects. It works like a charm if you understand its life cycle. Now v2 is just awesome pretty stable approach

[@thatsenam9183]

Such a awesome video. Really Enjoyed. We want more.

[@davidson7838]

Hi Povilas, Thank you very much for your invaluable teaching. this is really helpful and I was looking for something like this.

[@Claudio_Pereira]

Dear Korop, I would like to congratulate you on your impressive teaching. You were able to summarize in a few minutes a subject of great complexity. Thank you for sharing!

[@PovilasKorop]

Thanks Claudio, that's exactly my goal!

[@fullsetupok]

Hello, my name is Gaston. I am from Argentina. I want to congratulate you because your way of speaking is so clear and I can understand everything you say and learn a lot. Thank you very much.

[@tanzimibthesam5861]

Simply awesome no problem of SEO lets see how it goes

[@Mb-ic4pk]

I looove this man ♥️♥️, thank you a lot Mr.

[@MyCompsci]

Excellent. With livewire more laravel backend developers will easily turn out full stack!

[@abdulazizredi3682]

Absolutely amazing video

[@juniordev4190]

Awesome video. Thanks for sharing

[@asifm3520]

Helpful reason for using livewire. Earlier Jquery method was quite cumbersome.

[@techfuture-code-tv]

This is magic. Very very interesting

[@mahmoudelsherbeny6003]

thank you, you are the best ❤

[@fadyelias]

Thanks very much for useful and big tutorial We need validations for this inputs

[@70630515]

thanks, very helpful.

[@EduardR10]

:) Qué buena información. Gracias!

[@mori181186]

Livewire works with Alpine.js,too. This means you will have no limits. I love livewire,too. Thanks for the video.

[@KasimSheyi]

This is really nice.

[@justaman2024]

Cool, thank you!

[@webkoth6105]

Thanks this video.

[@sudhirdhawle5370]

Thank you

[@nelioaugusto5055]

Muito bom 👏👏

[@omarherri1445]

Man i just was trying to implement this in one of my projects.. and boom i see your video thank you a lot

[@vanillasrecaps6022]

I have the same situation lol

[@olixz]

Me too! haha

[@coolcha]

Very nice tutorial. Thanks. How would you pre-populate the products and quantities in the case of an edit controller form?

[@nurharizulaimanmatharith4023]

Great videos

[@erfannaseri8555]

wooow tnx alot very gooooood

[@martins-ecke]

That is really cool and useful! Thank you 😃 I wonder if data binding within a foreach loop would also works if one had checkboxes instead of a select field and multiple checkboxe can be checked. 🤔

[@LaravelDaily]

Liked this video? I have many more: subscribe to my 30+ Laravel courses, including a few courses about Livewire laraveldaily.com/courses

[@niyo_vainqueur]

can you please show us many to many relationships you used to submit that form in that database, It's kind confusing

[@chimerakraken]

Very strong tools mixed with alpinejs and tailwindcss

[@YoRoman]

It's great in terms of simplicity, no need for vue/js, but it seems there'll be a lot more requests to the server.

[@yazidthedev4281]

You can use livewire with alpine js .

[@javerleo]

Very useful video. Thanks Povilas. I wonder if there is some guide to make record edition, since I find confusing to retrieve and save the many-to-many data.

[@sunkanmikitibi]

This is a very good presentation...I was looking for this solution when this video came out very timely.. Please can you do the editting part thanks

[@PovilasKorop]

I'm planning a separate full course on Livewire

[@amilasandaruwan9386]

Thank you very much sir, Can you please do this video with parent-child fields validation part. It's really help

[@msdeav]

Thank you. It will be very useful if you make a video creating very simple e-market with all validations, one or multiple file uploads and other stuff like that to cover all possible usages of this Livewire...

[@msdeav]

And is it possible to create SPA using Livewire?

[@PovilasKorop]

I'm thinking about a separate *course* based on Livewire and some real-life project, not necessarily e-market, but something with at least a few forms and more complex stuff. Will tell the details of my plan when I have something.

[@msdeav]

@@PovilasKorop Thank you

[@cooltech5441]

thanks for very usefull tutorial, one question? how to validate the fields?

[@Talkinglife]

nice

[@brokersaddatv]

Great video. I need a livewire example of a nested dropdown like COUNTRY and CITY. How can we do it using livewire. Should I learn livewire for Laravel projects or vuejs ?

[@BudiYunior]

make this as series, or at least make one video about validations, it will be great, thx alot

[@KasimSheyi]

I must say I feel it is stressful using jquery to perform all of these after watching this video. I am definitely using livewire on my next project

[@allaghi]

Next project , I am going to use livewire

[@imadakel5844]

i have tried inertia js but this is also more dynamic

[@patrickaoun579]

Thanks for this tutorial. What about adding images within this form, how do I manipulate them? Meaning, how can i access multiple images in livewire and store them in the DB?

[@MouayedElhak]

Very nice tuto, i have a small question how can i add the price of the product in the same table ?

[@surajpaudel6215]

really useful course, one problem, is how to filter products that have already been selected by the user?

[@aliidhrees642]

How do I add a heading to product details form and have separate products for each heading??? Your content is already helping a lot. Thanks in advance

[@imamhsn195]

Awsome Sir. I was searching like this form interactions as you did. Just One thing different is that I am trying to add journal entries which will validate that the debit value and the credit value should be equal. I any better idea for my problem Please help me in implementing the journal entries. Thank you very much Again!

[@ericf3431]

Hi, this is awsome tutorial, i tried to implement it but im struggling on validation when theres a newly added input field group, using wildcard validation livewire doesnt read the the newly appended input group, how to trigger the validation if theres a new input groups added? thank you and Godbless

[@imadakel5844]

niiiiiiiiice

[@hertzstein]

amazing, I would be great if you can mix Bootstrap Modal with LiveWire , Thank you so much for the useful example

[@GerardoBelot]

Just have to change mostly the css, the modal implementations is pretty easy thow!!

[@ayashasiddika616]

Sir how can update?

[@bawarabid4477]

Thank You. However, what if we have the price in another input "not in the options". how to implement that

[@s.alimotamedi13]

thanks, very good course, but the problem is when we want to validate the input of list. how to do validation?

[@fantashio]

Nice work! Let's grow together.

[@martinsinansky2817]

I am starting with livewire now on a project and I need to implement a combination of parent-child functionality with a dependent dropdowns. Normaly, when there is a single component, I would track the list of values + the selected value. However,in my case I need to have a 2-level dependent dropdowns on each child separately. So if we continue with this example, each row should also have a dropdown for product category and the product dropdown should be dependent on the category selected. The category list can be populated once in teh parent, as it is going to be the same for all children, but the product list needs to refresh for each child separately on changing the category selection. Anyone has any idea how to make such a combo work? I have tried nested components, but still something messes it up for me and I honestly, I am clueless on why...

[@richardhoyle7778]

Can you do a full courses on livewire ? Say covering the setup of a fully functioning calendar where I can setup appointments exe, as well as Projects list and client info page with address city state and zip code, contact phone exe. An avatar and job photos for the work that is to be completed before and after; that type of thing how about an API how would that be down in livewire or can it?

[@abhijitpal9106]

Nice video sir. Sir how to show alert message before deleting product using livewire.

[@marcelloperri183]

This Livewire is a revolution, we can perform a dynamic form without javascript at all, thanks for the video, very useful, it would be great if you can show how the total amount of the cart changes based on the products that you dynamically select, is it possible to do something like that?

[@LaravelDaily]

Yes, should be possible, I've done something similar in my Livewire Kit, here's one of the components: livewirekit.com/components/checkout-price-calculator

[@marcelloperri183]

Great. Thanks for the quick response

[@gabrielavalentina7251]

Interesante tu solución, podías usar 2 variables de livewire para lograr el mismo efecto xd $add=0; $value;

[@JavedBaloch786]

Hello Povilas, A question came to mind, why you didn't use AlpineJS for the increment field, isn't Alpine the best choice, Livewire each time sends an AJAX req.

[@millionbits2023]

HI, Awesome, But when I add new row then repeating data from previous child row how to prevent it ?

[@angelhdz6554]

can i use the $orderProducts variable to insert the data from the Livewire component?

[@arshadsahjavi]

In this example, how can I make dynamically dependent dropdown.???

[@MahfuzurRahmanSaber]

Hi, can you give some tips about Opcache ?

[@AhsanKhan89]

@PovilasKorop I tried to follow the same process for , but the weird thing is whenever I try to press add button, It adds empty space but doesn't show the . When I perform an activity on other fields, it shows back. What could be the reason?

[@oscarcontreras7848]

Great example but I think i missed a step in the installation cause the User access and the register link does not appear only the Laravel welcome page ! Do I need to run the laravel UI or any kind of Auth after I run composer install command ?

[@PovilasKorop]

For this tutorial you don't need Auth at all, but yes I used Laravel UI package to give me the design layout.

[@ehsanbagherzadegantalkhoun1479]

Hello sir and thank you so much for useful video I have a simple question about livewire performance I guess it shows bad performance in high traffic and big project because of many Ajax calls so in this case do you think laravel+vuejs is better or not? Thanks

[@PovilasKorop]

There are ways to have fewer server requests. See this video: kzbin.info/www/bejne/bJjKp3-ElM5qo80

[@Robawtic]

How do you prevent pressing enter from creating a new child component?

[@vilandex5089]

hello i keep getting post error at product.php Route [orders.store] not defined can help me fix that and thx love your videos

[@HosamHasanMonir]

Awesome, Can you make a tutorial for Nesting Components!

[@PovilasKorop]

I'm actually struggling to find the best use-case for those, maybe you have one?

[@AlfredoElizondoLife]

@@PovilasKorop In this video Mat Staufer explains the concept along with Caleb who proposes a nice use case for it, watch it around minute 25 - 35 if you short on time. kzbin.info/www/bejne/r2S3gqRraJmXiK8

[@mohammedshopan2226]

I am new in livewire i use vue js before and i asking for design and ui in live wire can i found package do animation and ui component fast

[@vokalout]

Great video again. I have a quick question; I am working on a personal project and out of curiosity, I decided to add days and hours to my project. Like, you can select a day, and enter an hour. You video here is sort of similar to what I need, but how would you recommend I tackle this? It’s more like filling out business hours on the project.

[@PovilasKorop]

What exactly are you struggling with? With date/time picker? Or with saving the data? Or what exactly?

[@vokalout]

Povilas Korop I haven’t worked with many to many relationships, so, I’m finding it difficult to manage the days and the corresponding opening hours. I found 2 packages that do what I want, but it’s a bit confusing. This are the packages; 1. github.com/spatie/opening-hours 2. github.com/kylekatarnls/business-time I’d appreciate if you or anyone who’ll read this, make a quick tutorial on any of the packages above. I want to understand how to dynamically store the hours (with a relationship to business_id, in case of multiple businesses) from a form, and to display these hours to the blade view.

[@PovilasKorop]

@@vokalout We do have a demo-project based, from what I remember, on Spatie Opening hours. Check it out, shops are managing their opening time: 2019.quickadminpanel.com/demo/laravel-shops-map-google-maps

[@vokalout]

Povilas Korop thanks for the swift response. I went through your code and it is hard to me to fully understand what’s going on as I’m new to laravel and still learning. Do you guys have a video for that package? Thanks

[@PovilasKorop]

@@vokalout no, sorry

[@redouaneoukaci2595]

Hi. I use live search input instead of select html. But when i add for example 2 rows, when the searching start, the second row also do the same action. How to fix that. Thank you.

[@HRaza143]

Will it not increase the server overhead?

[@proyectowebsistemasve]

Hello Professor, I liked your very interesting class, I am trying to unite this class with the other class of the Selects dependent on three but the part of updating the Second select when changing the First does not work, it only does it if I give it to the add more button that updates the second select I appreciate what you can guide me with, I am learning Laravel and Livewire

[@proyectowebsistemasve]

teacher I was able to solve it thanks for your teachings!

[@himak21]

Where I can find multi validation rules of this example ?

[@adityakadam2256]

Won't it reduce the performance as server-side rendering is slower than client-side rendering?

What you mean? Blade and Nuxt are slower than Pure VueJs?

[@AavinSeth]

can you create an example on searching autosuggest show onfocus and hide onblur with livewire

[@rajamuruganthirumaran5310]

Hello Mr. Povilas Korop, Did you please upload a video for the same Parent-Child Form Example in the jetstream inertia.

[@LaravelDaily]

I don't actively work with inertia

[@shenelanuththara1106]

Can we save images with this same way ?

[@thearong_5853]

how to add select2 to select product i have problem with this one week ago sir pls help ?:(

[@maheshmaharjan2062]

How can we do same in select2. I have list of more than 50 items and I need the search option which only works for the 1st child. Remaining children donot have search option. Please help

[@RaicaBogdan]

Will this not create more load on the server since it will make requests back and fort to the backend? With a small handful of users, I don't really see a problem, but if you have hundreds, I feel that this can really create a massive issue.

[@ignatiusn9851]

Hello Povilas, by the way what's the difference between for example $blog->author->name and $blog->author()->name. I find that each at times give different outcome (at some instance causing no results being returned)

[@LaravelDaily]

Watch this video for the answer: kzbin.info/www/bejne/g5POpHWZr7ibmaM

[@socool3416]

How do i update the field on livewire ?

[@socialsource]

Would love to see a sample video on how to callback JSON in an API. Like: user enters data in backend form > entry gets a uniique code which is the URL (domain.com/id/uniquecode) > we call that data remotely with the unique url > verify their API key connected to the id in the url > get JSON from their Form back by reading the uniquecode in the DB. Did that make sense? :) We do all this on our own platforms now, but would like to learn how to do it in Laravel Thanks for your videos, very nice!

[@PovilasKorop]

Sounds like quite an edge case function, I'm trying to shoot videos for broader cases, so more people would benefit. Sorry, yours will not go on my to-do list this time :)

[@socialsource]

@@PovilasKorop No problem. It was worth a shot✌🏻.

[@nataly5440]

Thank you so much! But it doesn't work with the class "select2bs4"(( Do you know the reason?

[@nataly5440]

Ok, for those who have the same problem)) Just add wire:ignore on html input/select tag

[@vidhyaprakash85]

how to show old data in the form if any request failed.

[@eliaszgheib6821]

please i need your help, l have installed livewire and try the example shown at livewire page (counter) but still have a main issue asking livewire.js not found, and index not found, i tried installing livewire on other pc and still having the same issue that keeps livewire not responding

[@bernanddayamuntarihermawan7463]

has anyone tutorial for Livewire 2 Turbolink?

[@bvivekvivekbas]

Hi, Povilas Korop, how I make the action column stable from the scroll in livewire datatable please help me with this.

[@LaravelDaily]

Sorry I don't have any quick advice about it.

[@nicolaferrara7818]

Why you have only 52ms response time? On my local environment I have about 250ms response every ajax request. What is your server configuration?

[@christiandomantay8352]

is this possible also when uploading and previewing images?

[@PovilasKorop]

Livewire docs have this section about file uploads: laravel-livewire.com/docs/2.x/file-uploads

[@PanZabicom]

Whit is the name of the tutorial playlist?

[@vidhyaprakash85]

I need your view Sir, Let us consider this scenario, I have used the same one now I have developed a application has issue and return of products. Now how to manage the return of products with respect to same example. How DB can be made is such way that to record the return of products. Products return may be some products or all products. Please help me sir