[Live-coding] Laravel Livewire: Parent-Child Form Example
Vložit
- čas přidán 24. 07. 2024
- 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 - Jak na to + styl
![Laravel "Add to Cart": With/Without Livewire [LIVE-CODING]](http://i.ytimg.com/vi/FiC4rUYi27w/mqdefault.jpg)
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
I'm a new subscriber, I regret that I did not know this channel before. Thank you Mr. Povilas
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!
Thanks Claudio, that's exactly my goal!
This is so useful to me right now. Thank you! Looking forward to validation / more livewire form videos
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.
Just came across your channel and find it really helpful so far, so thanks and keep it up! 😊
You are the best! Always have the desires of helping others Laravel developer.
Hi Povilas, Thank you very much for your invaluable teaching. this is really helpful and I was looking for something like this.
Excellent. With livewire more laravel backend developers will easily turn out full stack!
Many thanks!!! Continue to develop this topic
Such a awesome video. Really Enjoyed. We want more.
Simply awesome no problem of SEO lets see how it goes
Helpful reason for using livewire. Earlier Jquery method was quite cumbersome.
This video is so awesome! Thank you for your work!!!
Very nice tutorial. Thanks. How would you pre-populate the products and quantities in the case of an edit controller form?
I looove this man ♥️♥️, thank you a lot Mr.
Livewire works with Alpine.js,too. This means you will have no limits. I love livewire,too. Thanks for the video.
Thanks very much for useful and big tutorial We need validations for this inputs
Awesome video. Thanks for sharing
Absolutely amazing video
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.
Man i just was trying to implement this in one of my projects.. and boom i see your video thank you a lot
I have the same situation lol
Me too! haha
This is magic. Very very interesting
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. 🤔
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
Liked this video? I have many more: subscribe to my 30+ Laravel courses, including a few courses about Livewire laraveldaily.com/courses
can you please show us many to many relationships you used to submit that form in that database, It's kind confusing
:) Qué buena información. Gracias!
thank you, you are the best ❤
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...
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.
You can use livewire with alpine js .
Thank You. However, what if we have the price in another input "not in the options". how to implement that
This is really nice.
thanks, very good course, but the problem is when we want to validate the input of list. how to do validation?
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?
thanks, very helpful.
really useful course, one problem, is how to filter products that have already been selected by the user?
HI, Awesome, But when I add new row then repeating data from previous child row how to prevent it ?
thanks for very usefull tutorial,
one question? how to validate the fields?
In this example, how can I make dynamically dependent dropdown.???
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
I'm planning a separate full course on Livewire
Very nice tuto, i have a small question
how can i add the price of the product in the same table ?
Thank you very much sir, Can you please do this video with parent-child fields validation part. It's really help
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 ?
Very strong tools mixed with alpinejs and tailwindcss
can i use the $orderProducts variable to insert the data from the Livewire component?
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?
Cool, thank you!
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
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...
And is it possible to create SPA using Livewire?
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.
@@PovilasKorop Thank you
Sir how can update?
How do you prevent pressing enter from creating a new child component?
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
@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?
Where I can find multi validation rules of this example ?
can you create an example on searching autosuggest show onfocus and hide onblur with livewire
how to add select2 to select product i have problem with this one week ago sir pls help ?:(
Great videos
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.
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.
how to show old data in the form if any request failed.
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!
hello i keep getting post error at product.php
Route [orders.store] not defined
can help me fix that
and thx love your videos
How do i update the field on livewire ?
Thanks this video.
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
Will it not increase the server overhead?
Can we save images with this same way ?
Hi, can you give some tips about Opcache ?
i have tried inertia js but this is also more dynamic
make this as series, or at least make one video about validations, it will be great, thx alot
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
Whit is the name of the tutorial playlist?
Muito bom 👏👏
wooow tnx alot very gooooood
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.
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
Nice video sir.
Sir how to show alert message before deleting product using livewire.
Hello Mr. Povilas Korop, Did you please upload a video for the same Parent-Child Form Example in the jetstream inertia.
I don't actively work with inertia
has anyone tutorial for Livewire 2 Turbolink?
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
teacher I was able to solve it thanks for your teachings!
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
how update records?
Thank you
Why you have only 52ms response time? On my local environment I have about 250ms response every ajax request. What is your server configuration?
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 ?
For this tutorial you don't need Auth at all, but yes I used Laravel UI package to give me the design layout.
Hi, Povilas Korop, how I make the action column stable from the scroll in livewire datatable please help me with this.
Sorry I don't have any quick advice about it.
amazing, I would be great if you can mix Bootstrap Modal with LiveWire , Thank you so much for the useful example
Just have to change mostly the css, the modal implementations is pretty easy thow!!
Sir, I got same problem about livewire . Could i get some-way to contact you ?
Next project , I am going to use livewire
Got this error on Save, LOG.error: foreach() argument must be of type array|object, null given {"userId":1,"exception":{}}
array (
0 =>
array (
'product_id' => '1',
'quantity' => 1,
),
1 =>
array (
'product_id' => '2',
'quantity' => 1,
),
2 =>
array (
'product_id' => '2',
'quantity' => '3',
),
)
how is this done with edit like i want to retrieve all data back into table
Maybe similar video on editing with Livewire would help: czcams.com/video/pfSjRcudZVA/video.html
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
There are ways to have fewer server requests. See this video: czcams.com/video/6ggvLN_i7mk/video.html
Is there a way I can edit it after save it to the database
Similar video: czcams.com/video/pfSjRcudZVA/video.html
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?
I implemented this in my project but I want to add Select2 plugin to select input and with JavaScrip querySelectorAll only select the first element ..what the problem
Select2 and Livewire don't play well together, I wouldn't recommend this
Thank you so much! But it doesn't work with the class "select2bs4"(( Do you know the reason?
Ok, for those who have the same problem)) Just add wire:ignore on html input/select tag
How to edit function 😮
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?
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
Great. Thanks for the quick response
Interesante tu solución, podías usar 2 variables de livewire para lograr el mismo efecto xd $add=0; $value;
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)
Watch this video for the answer: czcams.com/video/MbksBczShcA/video.html