4 Laravel Livewire Comments System

[Music] and now let's work on this kind of comment section with a level livewire when I typed something here and then hit on this Add button I need to add this comment into the comment list we have below let's see how we are going to do this so firstly this is created with Kelvin TSS and this is all about the stylings and you will get on the github repo everything is available there then what I'm going to do next first you can see we have this which is actually hard-coded here isn't it cool we can get this from the level end and that we can loop over all the comments we have so I have already created a component called comments by using this command and you already know how to create this and that has created two file which is livewire comments which on which I have this comments section and associated the livewire comments dot PHP file where we are just returning this blade file which is a component and I have used this inside my welcome dot plate just like previously we have a lot of a live wire or simply act live wire comments one more thing if you are on level 7 you can just use this and instead of this you can simply say comments and this is the name of your component and that should go like this it's not working because now I need to say live wire and it's a live wire component and that's good similarly you can also do here live wire : script suit so if scripts like this and live wire if tiles very nice and now everything is working as it was so let's move everything the comments on our comments dot PHP component so let's create a public variable called comments and here inside this I will add my comments so this is an array array of various comments so first we have the comment body so body will be the same we have here so we can copy it from there and paste it then we have created act that goes 3 made ago then at last we have the creator or the user who have created so let's say sarthak and then we can because this is a public variable it is easily available on our live wire component that means the blade so first let's remove everything so here we have and here we have so I have removed everything so name is gone time is gone everything is gone and now I can simply use for each loop and inside that I can say comments as comment and let's close the forage and for each loop then I can inst in the place of name I can say comment and we have a creator and that should go like this so now we have a sort of here then we just need to add one more for comment created act and finally comment body very nice we have done that and now the next task is when I click on this Add button I need to append a new comment into this list of the comments and because all the comments are coming the lateral end you can see we have this list of the comment we just need to add one more comment into this array and that we know because we said we need to click that means there should be some click event so why are click and I can say add comment and this comment the add comment is a function or a method on our comment dot PHP component so here anywhere you can create a public function called add comment and here I can simply say this arrow comments then adding a new comment and I for now just copy everything from there paste it like this call it new one one minute ago and new comment okay so let's try this so when we click on this add so there is a wire click event that is simply a click event and then that will trigger add comment on component of comments to our PHP file ok let's refresh and click you who you can see it's now adding it isn't it cool we can add it at the first so then you just need to say array unchipped and in that you can say the area is comments and the data is this one like here in that case we don't need this that's great refresh and now it's adding at the center ok so next what we need we need to add whatever we type here that will go into the comment not the hard-coded thing for now we can assume that there is a login user called bit fumes at time ill is always one minute and let's try this so we need to bind the data of this input field so let's create a new variable and again that should be a public called new comment and this is just a simple variable and we are going to bind this new comment with this input field and wire model is the way to bind it we can say we have a wire model of new comment so every time the value of input field is changed you have a new comment changing and that should reflect here for just now to show you how this is going to work I can just echo out this hair just above the input field so refresh it is here and now I can say hi I am new comment you can see it is now echoing out and every time I hit some new keyword here inside this you can see we are calling an edge ex request that should be great and next we need to move this comment into the comment list so because now we have the new comment into the new comment variable we can simply push it here on this body part so body is this arrow new comment like this and we can also use carbon here because this is a basically level so we can use anything here so that should be great and then diff for humans cool let's try this refresh it and live wire is really awesome click on it and you can see it is saying once again a go live where it's really awesome and everything is without any refresh because it's doing all the JavaScript ejects everything by its own next task is we need to clear this one when we add the new comment so it's very easy actually when we have done we just need to say this new comment is equal to empty that's great and once again livewire is really really awesome hand upon a smiley for this click and yes it is now empty and you can see we have this and this is super super great thing with the use of level live-fire

Channel: Bitfumes

Views: 36,446

Keywords: laravel livewire, laravel livewire tutorial, laravel livewire crud, livewire crud, laravel livewire spa, laravel livewire examples, laravel livewire español, laravel livewire full course, laravel livewire autocomplete, laravel livewire course, laravel livewire introduction, laravel livewire quickstart, laravel livewire click

Id: mvNTpy5A1fo

Length: 9min 13sec (553 seconds)

Published: Fri May 08 2020