Тёмный

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

Laravel Daily
Подписаться 141 тыс.
Просмотров 88 тыс.
50% 1

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

Хобби

Опубликовано:

 

13 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 175   
@marwanfallaha3642
@marwanfallaha3642 3 года назад
I'm a new subscriber, I regret that I did not know this channel before. Thank you Mr. Povilas
@beef3379
@beef3379 3 года назад
This is so useful to me right now. Thank you! Looking forward to validation / more livewire form videos
@SebastianMares
@SebastianMares 3 года назад
Just came across your channel and find it really helpful so far, so thanks and keep it up! 😊
@aisalen
@aisalen 3 года назад
You are the best! Always have the desires of helping others Laravel developer.
@AbrarAhmad-mz8vl
@AbrarAhmad-mz8vl 3 года назад
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
@Claudio_Pereira
@Claudio_Pereira 3 года назад
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
@PovilasKorop 3 года назад
Thanks Claudio, that's exactly my goal!
@fullsetupok
@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.
@user-mw1um3yx5o
@user-mw1um3yx5o 3 года назад
Many thanks!!! Continue to develop this topic
@trueyolu1906
@trueyolu1906 3 года назад
This video is so awesome! Thank you for your work!!!
@thatsenam9183
@thatsenam9183 3 года назад
Such a awesome video. Really Enjoyed. We want more.
@davidson7838
@davidson7838 2 года назад
Hi Povilas, Thank you very much for your invaluable teaching. this is really helpful and I was looking for something like this.
@Mb-ic4pk
@Mb-ic4pk 3 года назад
I looove this man ♥️♥️, thank you a lot Mr.
@MyCompsci
@MyCompsci 2 года назад
Excellent. With livewire more laravel backend developers will easily turn out full stack!
@abdulazizredi3682
@abdulazizredi3682 Год назад
Absolutely amazing video
@tanzimibthesam5861
@tanzimibthesam5861 3 года назад
Simply awesome no problem of SEO lets see how it goes
@asifm3520
@asifm3520 3 года назад
Helpful reason for using livewire. Earlier Jquery method was quite cumbersome.
@juniordev4190
@juniordev4190 3 года назад
Awesome video. Thanks for sharing
@mahmoudelsherbeny6003
@mahmoudelsherbeny6003 Год назад
thank you, you are the best ❤
@techfuture-code-tv
@techfuture-code-tv 3 года назад
This is magic. Very very interesting
@70630515
@70630515 3 года назад
thanks, very helpful.
@KasimSheyi
@KasimSheyi 3 года назад
This is really nice.
@mori181186
@mori181186 3 года назад
Livewire works with Alpine.js,too. This means you will have no limits. I love livewire,too. Thanks for the video.
@EduardR10
@EduardR10 2 года назад
:) Qué buena información. Gracias!
@fadyelias
@fadyelias 2 года назад
Thanks very much for useful and big tutorial We need validations for this inputs
@justaman2024
@justaman2024 3 года назад
Cool, thank you!
@omarherri1445
@omarherri1445 3 года назад
Man i just was trying to implement this in one of my projects.. and boom i see your video thank you a lot
@vanillasrecaps6022
@vanillasrecaps6022 3 года назад
I have the same situation lol
@olixz
@olixz 3 года назад
Me too! haha
@webkoth6105
@webkoth6105 3 года назад
Thanks this video.
@nurharizulaimanmatharith4023
@nurharizulaimanmatharith4023 3 года назад
Great videos
@nelioaugusto5055
@nelioaugusto5055 3 года назад
Muito bom 👏👏
@sudhirdhawle5370
@sudhirdhawle5370 3 года назад
Thank you
@erfannaseri8555
@erfannaseri8555 3 года назад
wooow tnx alot very gooooood
@coolcha
@coolcha 3 года назад
Very nice tutorial. Thanks. How would you pre-populate the products and quantities in the case of an edit controller form?
@LaravelDaily
@LaravelDaily 2 года назад
Liked this video? I have many more: subscribe to my 30+ Laravel courses, including a few courses about Livewire laraveldaily.com/courses
@niyo_vainqueur
@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
@chimerakraken 3 года назад
Very strong tools mixed with alpinejs and tailwindcss
@martins-ecke
@martins-ecke 3 года назад
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. 🤔
@javerleo
@javerleo 3 года назад
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.
@Talkinglife
@Talkinglife 3 года назад
nice
@amilasandaruwan9386
@amilasandaruwan9386 2 года назад
Thank you very much sir, Can you please do this video with parent-child fields validation part. It's really help
@cooltech5441
@cooltech5441 3 года назад
thanks for very usefull tutorial, one question? how to validate the fields?
@patrickaoun579
@patrickaoun579 2 года назад
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?
@ericf3431
@ericf3431 3 года назад
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
@MouayedElhak
@MouayedElhak 3 года назад
Very nice tuto, i have a small question how can i add the price of the product in the same table ?
@brokersaddatv
@brokersaddatv 3 года назад
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 ?
@YoRoman
@YoRoman 3 года назад
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
@yazidthedev4281 3 года назад
You can use livewire with alpine js .
@surajpaudel6215
@surajpaudel6215 2 года назад
really useful course, one problem, is how to filter products that have already been selected by the user?
@BudiYunior
@BudiYunior 3 года назад
make this as series, or at least make one video about validations, it will be great, thx alot
@aliidhrees642
@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
@sunkanmikitibi
@sunkanmikitibi 3 года назад
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
@PovilasKorop 3 года назад
I'm planning a separate full course on Livewire
@bawarabid4477
@bawarabid4477 3 года назад
Thank You. However, what if we have the price in another input "not in the options". how to implement that
@allaghi
@allaghi 3 года назад
Next project , I am going to use livewire
@imamhsn195
@imamhsn195 3 года назад
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!
@msdeav
@msdeav 3 года назад
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
@msdeav 3 года назад
And is it possible to create SPA using Livewire?
@PovilasKorop
@PovilasKorop 3 года назад
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
@msdeav 3 года назад
@@PovilasKorop Thank you
@JavedBaloch786
@JavedBaloch786 3 года назад
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.
@imadakel5844
@imadakel5844 3 года назад
i have tried inertia js but this is also more dynamic
@KasimSheyi
@KasimSheyi 3 года назад
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
@AhsanKhan89
@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?
@angelhdz6554
@angelhdz6554 2 года назад
can i use the $orderProducts variable to insert the data from the Livewire component?
@s.alimotamedi13
@s.alimotamedi13 2 года назад
thanks, very good course, but the problem is when we want to validate the input of list. how to do validation?
@millionbits2023
@millionbits2023 10 месяцев назад
HI, Awesome, But when I add new row then repeating data from previous child row how to prevent it ?
@martinsinansky2817
@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...
@imadakel5844
@imadakel5844 3 года назад
niiiiiiiiice
@fantashio
@fantashio 3 года назад
Nice work! Let's grow together.
@richardhoyle7778
@richardhoyle7778 3 года назад
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?
@gabrielavalentina7251
@gabrielavalentina7251 3 года назад
Interesante tu solución, podías usar 2 variables de livewire para lograr el mismo efecto xd $add=0; $value;
@oscarcontreras7848
@oscarcontreras7848 3 года назад
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
@PovilasKorop 3 года назад
For this tutorial you don't need Auth at all, but yes I used Laravel UI package to give me the design layout.
@arshadsahjavi
@arshadsahjavi 3 года назад
In this example, how can I make dynamically dependent dropdown.???
@vilandex5089
@vilandex5089 3 года назад
hello i keep getting post error at product.php Route [orders.store] not defined can help me fix that and thx love your videos
@hertzstein
@hertzstein 3 года назад
amazing, I would be great if you can mix Bootstrap Modal with LiveWire , Thank you so much for the useful example
@GerardoBelot
@GerardoBelot 3 года назад
Just have to change mostly the css, the modal implementations is pretty easy thow!!
@redouaneoukaci2595
@redouaneoukaci2595 2 года назад
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.
@abhijitpal9106
@abhijitpal9106 3 года назад
Nice video sir. Sir how to show alert message before deleting product using livewire.
@Robawtic
@Robawtic 3 года назад
How do you prevent pressing enter from creating a new child component?
@MahfuzurRahmanSaber
@MahfuzurRahmanSaber 3 года назад
Hi, can you give some tips about Opcache ?
@himak21
@himak21 2 года назад
Where I can find multi validation rules of this example ?
@mohammedshopan2226
@mohammedshopan2226 2 года назад
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
@maheshmaharjan2062
@maheshmaharjan2062 3 года назад
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
@RaicaBogdan 2 года назад
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.
@proyectowebsistemasve
@proyectowebsistemasve 8 месяцев назад
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
@proyectowebsistemasve 8 месяцев назад
teacher I was able to solve it thanks for your teachings!
@ignatiusn9851
@ignatiusn9851 3 года назад
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
@LaravelDaily 3 года назад
Watch this video for the answer: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-MbksBczShcA.html
@ehsanbagherzadegantalkhoun1479
@ehsanbagherzadegantalkhoun1479 3 года назад
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
@PovilasKorop 3 года назад
There are ways to have fewer server requests. See this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6ggvLN_i7mk.html
@eliaszgheib6821
@eliaszgheib6821 2 года назад
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
@nicolaferrara7818
@nicolaferrara7818 3 года назад
Why you have only 52ms response time? On my local environment I have about 250ms response every ajax request. What is your server configuration?
@ayashasiddika616
@ayashasiddika616 3 года назад
Sir how can update?
@HRaza143
@HRaza143 2 года назад
Will it not increase the server overhead?
@rajamuruganthirumaran5310
@rajamuruganthirumaran5310 3 года назад
Hello Mr. Povilas Korop, Did you please upload a video for the same Parent-Child Form Example in the jetstream inertia.
@LaravelDaily
@LaravelDaily 3 года назад
I don't actively work with inertia
@thearong_5853
@thearong_5853 2 года назад
how to add select2 to select product i have problem with this one week ago sir pls help ?:(
@AavinSeth
@AavinSeth 3 года назад
can you create an example on searching autosuggest show onfocus and hide onblur with livewire
@bvivekvivekbas
@bvivekvivekbas 3 года назад
Hi, Povilas Korop, how I make the action column stable from the scroll in livewire datatable please help me with this.
@LaravelDaily
@LaravelDaily 3 года назад
Sorry I don't have any quick advice about it.
@shenelanuththara1106
@shenelanuththara1106 2 года назад
Can we save images with this same way ?
@nataly5440
@nataly5440 3 года назад
Thank you so much! But it doesn't work with the class "select2bs4"(( Do you know the reason?
@nataly5440
@nataly5440 3 года назад
Ok, for those who have the same problem)) Just add wire:ignore on html input/select tag
@vokalout
@vokalout 3 года назад
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
@PovilasKorop 3 года назад
What exactly are you struggling with? With date/time picker? Or with saving the data? Or what exactly?
@vokalout
@vokalout 3 года назад
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
@PovilasKorop 3 года назад
@@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
@vokalout 3 года назад
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
@PovilasKorop 3 года назад
@@vokalout no, sorry
@marcelloperri183
@marcelloperri183 2 года назад
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
@LaravelDaily 2 года назад
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
@marcelloperri183 2 года назад
Great. Thanks for the quick response
@HosamHasanMonir
@HosamHasanMonir 3 года назад
Awesome, Can you make a tutorial for Nesting Components!
@PovilasKorop
@PovilasKorop 3 года назад
I'm actually struggling to find the best use-case for those, maybe you have one?
@AlfredoElizondoLife
@AlfredoElizondoLife 3 года назад
@@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. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-y3TQq534dRM.html
@vidhyaprakash85
@vidhyaprakash85 3 года назад
how to show old data in the form if any request failed.
@shenelanuththara1106
@shenelanuththara1106 3 года назад
Sir, I got same problem about livewire . Could i get some-way to contact you ?
@adityakadam2256
@adityakadam2256 3 года назад
Won't it reduce the performance as server-side rendering is slower than client-side rendering?
3 года назад
What you mean? Blade and Nuxt are slower than Pure VueJs?
@miguelviegas9424
@miguelviegas9424 3 года назад
There is a minor bug when removing a product I encountered. Luckily the livewirekit has the fix :) I would just like to share it here in case someone is following the video. At 12:50 array_values($this->orderProducts); should be $this->orderProducts = array_values($this->orderProducts);
@miguelviegas9424
@miguelviegas9424 3 года назад
I should have watched till the end :)
@socool3416
@socool3416 2 года назад
How do i update the field on livewire ?
@PanZabicom
@PanZabicom 2 года назад
Whit is the name of the tutorial playlist?
@bdiarsa
@bdiarsa 3 года назад
Livewire is "Game Changer". And now I'm in Livewire project.
@christiandomantay8352
@christiandomantay8352 3 года назад
is this possible also when uploading and previewing images?
@PovilasKorop
@PovilasKorop 3 года назад
Livewire docs have this section about file uploads: laravel-livewire.com/docs/2.x/file-uploads
Далее
Laravel + Livewire todo app (and so much more)
16:41
Просмотров 35 тыс.
PHP on the frontend! No more Javascript!
14:47
Просмотров 119 тыс.
Why Signals Are Better Than React Hooks
16:30
Просмотров 462 тыс.
Laravel Origins: A PHP Documentary
33:27
Просмотров 155 тыс.
4 Packages You Need in ANY Laravel Project
8:14
Просмотров 61 тыс.
The Modern Index.php File
16:13
Просмотров 15 тыс.
13 FREE Livewire Components I've Found
6:44
Просмотров 23 тыс.
#londonbridges
0:14
Просмотров 62 млн
Who has won ?? 😀 #shortvideo #lizzyisaeva
0:24
Просмотров 60 млн
тгк: katylazarevaa
0:16
Просмотров 2,3 млн