Well, the first thing we are going to do is install Laravel, in this case I am going to use this command. This Composer command will allow me to create a new Laravel project and instead of "blog" I will put the name of the application here, you can put the name you prefer, I will name this project "my thoughts ", which in English would be" my-thoughts ". In this case it does not matter if you use WampServer, if you use Xampp, if you use Laragon, it does not matter even if you use Apache or Nginx, you can have the configuration that you see fit. The important thing is that they can create a new Laravel project and on this we are going to see how to work Laravel with Vue. As always, you can use the text editor of your choice, in this case I am going to use Sublime Text, very good, once the project is finished creating here in the console I am going to access the project, right now I am going to quickly configure a VirtualHosts to be able to access this project through a specific URL and not have to be executing this command in order to see the project locally. I am going to give it the same name as the Laravel project, lastly since I am on Windows I am going to also modify this hosts file. I will give it exactly the same name that I use here. I am going to start Apache, in this case through WampServer and this is how I have already been able to access the Laravel project that I have just created on this project we are going to work on. The first thing we are going to do is quickly generate a small authentication system and likewise we are going to create an empty database, in this case, I will name this database "thoughts" and here I am going to put my data from local connection, the idea is that we create an empty database with the intention that when executing the migrations, tables are generated on this empty database. Then we are going to create an empty database, this database will have the name "thoughts" and on this database we are going to execute our migrations. So when updating we already have an authentication system and I am going to create an account quickly. After registering, I already managed to access the application and we are going to modify this view to make use of Vue precisely in this path called home, then, inside the path> web folder we are going to find this content, here it tells us that the home path It is managed by HomeController, therefore we are going to go to HomeController and here we see that HomeController, through its index method, is returning a view called home, so if we access resources> views> home.blade.php we will find ourselves With the view that we have just here before integrating Vue, the first thing we are going to do is design here, only with HTML, the interface that we want to use. So, here we see that we have a panel, we are going to create more panels at the bottom and this first panel we are going to use to basically enter information, so here I am going to put "What are you thinking about now?" inside panel-body we are going to put a form, inside this form we are going to put a form-group, here we will have a text type input with form-control class and we are going to put here a label that accompanies this text box, the name of this text box will be "thought". Then what we will do next is to generate a new panel, therefore, here we are going to put a panel, this panel will basically contain a text and at the top it will simply say "Published in" and will show the date on which it was have posted the thought. If we update, we already have the interface that we are going to use, well actually we need to add some buttons, for the form, the user will be able to press enter on the text box or he will also be able to use a button, a button that It will say "Send thought", with regard to each of the thoughts that have already been registered we are going to put here a panel-footer and here we are going to have two buttons mainly, one button will be to edit the thought and another button will be to delete it . If we update, we are already seeing, we are already seeing this new interface. Once we have thought about the interface that we want to design, what we will do now is start integrating Vue. The idea of using Vue is that every time a new thought is sent, the page does not have to refresh; every time the user wants to edit, they don't have to go to another view to edit; Every time you want to delete, you don't have to wait for the whole page to reload. Vue will allow us to update the view and make requests in the background, make requests in the background, it corresponds to Ajax technology, to make these HTTP requests to a specific API, which in this case we will also create with Laravel, we can use different libraries, for example, we can use jQuery or we can use Axios, in this case we are going to use Axios. So the first thing we will do is start using Vue and therefore we have to identify which Vue components we are going to create, for example, all the published thoughts are going to be a certain component, the form that we are going to have up here is going to be another component also of Vue and finally, this entire section as a whole will also correspond to a component of Vue. So what is the first thing we have to do? The first thing to keep in mind is that a new Laravel project by default already uses Vue. Here we have a file called "app.js" that is inside resources> assets> js this file, what it is doing basically is loading Vue so that we can use it from here. In fact Laravel has already created a Vue component and it is being loaded by the component that Laravel has defined is called ExampleComponent and has this content. In addition, Vue is being used on an element called "app", this element called app, is an HTML element on which Vue will be able to work. This means that we here in this file can write Javascript code making use of new features that the language presents and we do not have to worry about compatibility with old browsers because in the end all our code that is going to be here will result in a file called app.js that will be inside the public folder here for example we see this app.js file that is inside public, when a person visits our page they will not load this from here but will load the result that Webpack will generate from this input file. Here at the bottom we have a file called webpack.mix.js Mix is a resource manager that Laravel makes available to us and makes use of Webpack behind it. Here, for example, these two lines of Mix do the following: they take this app.js file that we mentioned before, as the input file and produce an output inside public> js which is also what we mentioned before Likewise, it makes use of the css pre-processor Sass and makes this file that is here, also source a styles file inside the css folder. In this case we are going to ignore this css and we are just going to make use of what is presented here. Now the question is, how do we use Mix, how do we use Webpack? Just as we have a package manager for PHP called Composer there is also a package manager for Javascript called npm. So, through npm we are going to download Laravel Mix; In order to use npm, we first have to make sure we have Node. In this case I have this version. If you don't have it installed and are on Windows, you can simply go to the official Node. Actually, the installation is not complicated at all, if you are using Windows, for example, just download an executable file, press next, next and finish installing Node, that should not be any problem for you. Even if you have an old version of Node and want to update it, the steps to follow are exactly the same, you don't even have to uninstall anything, just install on top of it and there won't be any kind of conflict. This installation will also make npm available to you, which is the package manager for Javascript and Node and Node.js. In this case, I already have both installed so I can continue. If you don't have it installed, you should install it right now and then continue watching this video. How do we install Laravel Mix? An alternative is to execute npm install, this command npm install tells npm to download all the dependencies of the project- all the dependencies that are listed in a file called package.json within this file package.json we see clearly how it is listed here laravel-mix then, we are going to execute npm install so that all these dependencies are finished installing, after a few minutes, when the download finishes, what we are going to see in our project is that a new folder called "node_modules" has been created inside from this folder, is where these packages that have just been installed via npm are located. As we already have Laravel Mix, what we are going to do is execute Laravel Mix to make use of Webpack and to compile our Javascript code and generate a file within public, for this we execute npm run watch, with the intention that Webpack it is observing possible changes that occur on our files and that it compiles them at that moment. That is the difference between npm run dev, where the compilation is executed only once and npm run watch, which is when in this case Webpack keeps listening for possible changes to the input files. So, going back to what we were, we have app.js within assets this file we are going to modify, here we are going to put our Javascript code that we need, home.blade.php is our view, where we are going to make use of the components of Vue, ExampleComponent is an example component that Laravel has defined in our project, and well, then the first thing we will do is include this component within our home view. Here, our home.blade.php view is a view that extends from a more general layout called app, this more general layout, within the body of the page has a div with app id, which is precisely on which our instance of Vue, this is allowing Vue to act on this entire section of our page, that is, the content that is defined here within home will be able to be modified with Vue. Okay, so what's the first thing we're going to do? The first thing we are going to do is rename this component to represent each of the thoughts that have been published, when doing this, as a change has been detected, Laravel Mix has just notified us of an error that it has had and that error arises for the following: that inside app.js we are telling Vue that we are going to define a component that is in this file, we are going to modify this. Our component will be called this way and the file associated with said component will be called this way, every time we make a change, Laravel Mix is telling us that it has just been compiled correctly and everything we are modifying, is updating this app.js file Very well, as we have defined this Vue component here, this, we can use it on our view, for example, here we are going to make use of said component, we save, this component says "I ' m an example component! ", I am an example component. So, we are going to update here, and as we can see, here we have our example component below, only that we are going to adapt it so that this example component represents this here. Vue components are represented by a single file, they have a ".vue" extension and within these components, we will mainly find the template associated with the component and the Javascript code that we want to write for said component. In our case, our component that represents a published thought must have this content, so this is what we are going to put inside our component, I am going to replace this that is inside template with this new structure, which is the one we want use, here we are also going to save. When updating we have the same as before, only this here is now a Vue Component, we are going to create another component to represent what we have here at the top. I'm just going to create a new file and save it with the name FormComponent, so we're going to copy all of this, we're going to paste it here and our component that contains the form is this here. So, we are going to modify its template by the structure that interests us, here we see that we have an @if that makes use of a session variable, we usually work with this from here when we are using Laravel without Javascript when we are making pages that make Requests that refresh the browser, in this case, we are not going to refresh the browser, therefore, this here we will have to show us in another way. Here, if we put form-component directly we are going to get an error, the component is not going to be shown, that is because in order to use it we have to tell Vue of its existence, so here, we tell it how we want to use it and we tell it in which file that component is defined. We update and return to the initial state, only now we are using Vue components. Very well, the idea is that with Javascript, we make a request to the server in the background to register the thought, to edit the thought, to eliminate the thought, that means that we are going to develop a small API in Laravel and with Javascript we are going to consume said API and thanks to Vue we will be able to update our view. But before integrating this with an API, we are going to write it only using Javascript, we are going to detect the dispatch event here, we are going to show a new Vue Component and in this way once we have programmed the Frontend functionality we will implement the Backend functionality and then we will return to the Frontend functionality so that they consume the API that we are going to be defining from Backend, but before that we are going to define our last component I am going to give it here New File and we are going to create MyThoughtsComponent.vue we are going to copy an example, We are going to eliminate what is inside the template and here we are going to put all this, there it is, we are going to register it, as we did before and after doing this, we are going to use that new component here then, save, update and have the same . What have we done all this for? By having each component in a separate file we will be able to work with them in a simpler way, for example, within MyThoughtsComponent, we are interested in having one of these for each Javascript object that we have, so if we have three thoughts we will want to have this component three times, for this, we are going to use the v-for directive and here we are going to say that we are going to iterate for each thought within an array called thoughts, that means that here we are going to add one more method called data, this method called data is going to return the data that this component is going to use, this data is going to be represented through an object, what are we going to have as data? we are going to have an arrangement of thoughts. A moment ago we just saw a small error and that is because we were missing a comma here. This is an object, this is a function, we must put a comma before the next function. Well, when we use this v-for directive, it is advisable to indicate to Vue in this way, what the id of each of the items will be. In this case we are going to tell you that the identifier of each thought is going to be its corresponding id attribute. So, up to here, as our array is empty, if we update, we don't have any published thoughts, but we are going to put an object here for now, to this object we are going to put id "1" and we are going to pass some more data, what data will each thought need? you are going to need a certain text which is the description, you are going to need the date it was published, so here we are going to put description abc and here we are going to put when it was created, I just saved the changes, we updated and now we have a published thought, that's because in our array we have an object, however the information of this object is not being displayed, because our component still has constant information. So, we stop thinking in a general way and start thinking in a particular way, what information does a ThoughtComponent have? What information does each of the thoughts have? And thinking about it, we are going to define here this data function that is going to return the information that each thought is going to have. So, what data is this component that represents a thought going to have? We are going to have here an object called thought, this object called thought, it will have an id, it will have a description, and it will also have a publication date, so this data is what our component will use in its template, published in and here we will show thought.created_at, following the same idea, in this paragraph we are going to put thought.description and save. However, here we see that neither the date nor the description of the thought is being shown, this happens because this general component is not passing information to this more specific component, although here we have a for directive, Vue does not automatically send this information to the component, but we have to explicitly specify that we want that component to make use of each thought object. To do this, I'm going to write this and then this thought object is being sent through a property with the same name, so that we can use that from this more specific component, we have to add one more attribute here, called props, this tribute props will have this value here, in this way, each thought is sent and linked to this more specific component that receives that information from this parent component. If we update, we see that now the date works for us and the description of the thought also works for us. Now we are going to do that when something is written here and press enter or this button is pressed, a new element is added to our arrangement of thoughts, this means that within the component we want there to be a variable thought with this value and here we are passing the thought object that we have available thanks to the forum but here we could also send as information: an id, a description that says zz and a date that says "111" in this way, in such a way that if we update, we have here the ones and we have here the zetas, this is to demonstrate that what I am putting here is the thought object, this is what we want to send and this is the value we want to use for said variable, so continuing, now we go to our FormComponent and here we have We have to detect the submit event, that is, whether we press enter from here or whether the button is pressed with a click, we have to detect the submit event on the form, for this it is We select "v-on: submit =" and here we put the method we want to call, in this case we are going to call a "newThought" method and then we will proceed to define this method. To do this, here in our script section we are going to put "methods" and we are going to define the newThought method and basically here what we have to do is take the text that the user has written, here we do not have to take any date or take No id because that will be generated by the server, the API will return the id of the thought after registering it and the server will also define a date for the thought that we are registering. Then we are simply interested in the value of this input to be able to read it easily, we are going to use v-model here and we are going to put a name to this, we are going to put it as a name descript- if we put it as a name description, then here, inside From this data function we are going to return an object with the data that we want to use, in this case, we are simply going to have a variable called description. So, when this newThought method is called, we will generate an alert with the value of the description variable. In order for us to verify if we are already reading correctly the description written by the user and also, if we are also detecting the submit event, then I am going to update the page here, I am going to write "12345", I am going to press send thought, after To do this, we see that the submit event is not being detected and that rather a GET request is being made to the server, updating the page, to prevent this submit event from reloading the page, here instead of submit, we must use submit .prevent so that in this way we can use this function and also avoid the page overload that forms have by default. So, we update, I am going to write "111222" and press enter, after doing that, in the console we see an error that says "description is not defined" that means that for us to be able to access this data, we have to use this here, this will allow us access to the variables that we have as data. So here we write "222333", enter and we see here an alert with the value we have entered, if I use the button, the alert is shown in the same way, that is because the submit event is called, either by pressing enter or already Either by clicking on this button, we already have the new description here. Here we would have to use the API to record the new thought and notify the more general component that contains the component listing of this change to update this fix. How do we do it? How do we send information from a child component to a parent component? We can do that through events. We are going to define a new event here, we are going to call this event "new" and we are going to do that when this event occurs we call this function "add thought" here, when this event occurs We are going to call this method "addThought", therefore we are going to define that event here, we are going to put methods here and inside we are going to define this new method, this new method is going to be called through the new event that the component son is going to generate and here we are going to receive the new thought, in such a way that we will do this.thoughts.push and on the arrangement we have, we are going to put the new thought. So how do we get this new event to be raised? We can do that here, to generate an event we use this. $ emit in the first parameter we say what is the event we want to generate and in the second parameter we put the information we want to send, in this case we are going to send an object called thought that object called thought we are going to define it just up here this object will have an id that we will obtain from the server, for now we will put any value, it will have a description and it will have a registration date. So from this form component, we create this object, we generate the new event with this data, that will be detected by this more general component, upon detecting the new event it will call this addThought method that will receive the data sent by who generated the event, that data will be an object or thought that we are going to put on our arrangement of thoughts. So we update and here I am going to put a thought that will be "q", well, here we realize that what we wanted is not working properly and every time we press we do not get any error on the left side, apparently the event is not working calling properly, before continuing, we must solve this problem, here it tells us that we have a property within data that is called thought and that is currently declared as prop, in Sublime Text the syntax did not detect me correctly so I closed it and I have opened PhpStorm, for sure that with some plugin, Sublime Text would recognize the syntax well, but in order not to waste time we are going to continue here, then, the warning that we have been getting corresponds to this component, with ThoughtComponent, the warning tells us: you are getting thought externally, you no longer need to define it within data. Therefore here we are going to eliminate it, because this object will come from the outside, if we update, we see that the warning we had has disappeared. Let's see now why the submit event that we had defined before is not working here, we inside the FormComponent are emitting an event called new and here we are listening to the new event so that when this event occurs we call the addThought method, the addThought method adds a thought new to our arrangement of thoughts. The question is: why is this not working properly? What happens is that the event is emitted from FormComponent, therefore, we must put this event here instead of here, which is where it was, then we are going to update and here we are going to put "1122", send thought and once We did this, we see a new thought appear at the bottom, I'm going to put "q" here, I'm going to press enter and the thought appears at the bottom. For now we are putting the same date, because it is not yet connected to the server, we are going to finish programming all the Frontend and then go on to programming the Backend with Laravel, once you press send thought or press enter, this text has to clean up. So inside FormComponent we are going to do the following: this.description is going to be equal to an empty string, we update this variable and since this variable is linked to the input with this, its content will be eliminated, update and do a test. the new thought is published, and at the top the text box is empty again, so, we have seen how to pass information from a parent component to a child component and we have seen how through events we can also pass information from a child component to a parent component. Now, following the idea of events we are going to implement the elimination of thoughts, here, within the thought component, we are going to associate an event to the button we are going to put v-on here: click when this button is clicked we will call the onClickDelete method and then we are going to define this method, we add a methods attribute and here we are going to create this onClickDelete function, in this way, when the delete button is clicked, we are going to produce an event this. $ emit the event that We want to produce, it will be called delete and we are simply going to produce this event called delete that will be received by this parent component, now, on this side we are going to detect the delete event, when this event occurs we are going to call a deleteThought function and we are going to pass the position that the thought has in the arrangement of thoughts, to do so, we are going to pass index to it, in such a way that to access this index we will use parentheses here and we will put index here, then, from this arrangement of thoughts we access the thought object, but we also access the index that each thought has in the arrangement, that index we pass to this deleteThought method and we are now going to create this method , this method receives its position and we go to the arrangement of thoughts, here we can call from the arrangement the splice function so that from this position an element is eliminated. So, if we update our page here, we are going to add a few elements and now we will proceed to eliminate them, for example, we will eliminate this one in the middle, we will eliminate this abc and finally this 333. We already have it! What we are missing now is editing, then, in our component that represents a thought, we have to detect the click event on the edit button and associate a method with it, for example we can define an onClickEdit method, then here we will have that method when you click on onClickEdit, we will change this paragraph for input, so we can do this we will need more than one variable, a variable that tells our component in what state is, is in a state of only reading or is in edit state, we are going to add a Boolean value here inside data that determines if the component is being edited or not, we are going to call this Boolean value editMode. Is it in edit mode or not? By default we would say no, but when the edit button is clicked, we will make editMode true. So, within our template, based on the value of editMode, we are going to decide whether to show a paragraph or show an input, then, here we will have the paragraph and here we will have an input of type text with form-control class, we will say then, If we are in edit mode, the paragraph will be seen, if not, the input will be seen. Let's check the operation of these directives, update and here we see that we are shown an input instead of a paragraph, what happens here is that the order should be the opposite. If we are in edit mode we will show the input, if we do not show the paragraph and this, we will also apply it to the button that we have below, what I mean is the following: we will have a button that says save changes, of such that if it is currently being edited, we will show save changes, if not, we will show the edit button, and the delete button? Well it will always be seen, we update, editMode is false by default, when I press edit, this changes, yes? I'm going to add a new one, by default editMode is false, I give it edit, and this changes, I can delete it anyway, the idea is that when edit is pressed, this input will show the description of the thought, then we will link with the description of the thought, in our case, this is being interpreted by Vue and it is not about blade directives, we are going to update, I give it edit, and here it says "abc", I am going to create a new thought, it I give edit, and here it says "123". See how easy it is to link the data with the visual components? That is one reason why Vue is often used instead of jQuery. Now, when you press save changes, the idea is that these changes are notified to the parent component so that it updates the information of the corresponding thought, so that it updates the information of the thought that has been modified, then to this save changes we are going to put a "click" event that calls onClickUpdate and within methods we are going to define onClickUpdate this onClickUpdate the first thing it will do is finish with the edit mode and the next thing it will do is emit an event, we are going to emit an event called update and it we are going to pass the thought that has just been edited as information. So, inside MyThoughtsComponent we will have one more event, not only the delete event, we will also have an update event, this update event will call updateThought and we will pass the index of the element that has been modified, we will Let's quickly copy this function from here and we are going to change the name, then, here, we are going to access the element that is in this position and we have to update it with the new value. Yes, how do we do this? Here we are issuing the update event with the updated object, this event is captured on this side and updateThought is called, so here we are going to pass the index and the arguments that originally came from the event issuance as arguments . So here we will be able to access the thought that has been edited, we update, I give it to edit, I put 123, I give it save changes and this has just been successfully edited. The child component fired the update event, the parent component updated the element in the array as it should be, I am going to add a new thought and I am going to edit it and I am going to edit it like this, perfect, we have edit, delete and register, we have a CRUD with Vue, but this is not a CRUD of Vue with Laravel, we are going to create a small API with Laravel so that this works correctly, because as it is we only have Vue Vue is Frontend. If I update, all data is lost. Well, as we discussed before, now we are going to proceed to define routes to define an API that allows us to register new thoughts, edit them or even delete them so that when our page is completely updated, the changes that have been made persist. In this case we are going to create an API to be used by our own application, so we are not going to define an authentication system for third parties that are going to use our API, we will only use it internally, therefore the routes will be to be defined here in web.php because what we are doing is not a complete SPA it is rather a hybrid, where we have multiple pages but we are applying Vue to a specific page. Developing a complete SPA implies having routes that are also handled on the client side and could even involve some techniques such as Server Side Rendering, that is, getting the server to generate the Vue structure and return the view already ready so that they are not to do client-side requests when the page first loads. So according to the Laravel documentation, we can define routes for resources and we can select which routes we are interested in using only or using except, another way is to define API-type resources where Laravel will omit create and edit by default, then we are going to copy this, in such a way that we are going to define a resource called thoughts and we are going to have a controller called thoughts controller and we are going to use this Laravel command to define a controller that has methods associated with these routes that we are defining, then here , in the terminal, we are going to define a controller called ThoughtController, we give it enter well, unfortunately here, I do not have this option available because the version I am using is 5.5.40 it is not 5.6 this command is available in 5.6 but there is no problem , we are going to create the controller and we are going to add the methods to it, or rather, within version 5.5 we do have access to this flag vamo s to leave all the methods, except create and edit because those are not needed, index will return the list of thoughts, store will register a new thought, in this case we do not need show because we will not show more specific details when it is done click on one of them, in this case we are going to require update to edit and destroy to delete, then, in index we simply must return the list of thoughts of the user who has logged in. To achieve this, first of all we are going to define our table to save the thoughts, for this we will use php artistan make: model, we are going to create this model and in passing we are going to also create its corresponding migration, then here we are going to define the columns that it will have this table, each thought will have a description, the id is here, the registration date will be here, in fact here will also be the update date, the last update date. This of the timestamps is already managed internally by Laravel, and finally, since it is an API, to be used internally we can also add here we can add a foreign key here with the intention of identifying which user each of the thoughts and that depending on the user who logs in, let's see what each one has written so that each one can have their own blog of thoughts. So for this controller to work properly we are going to require that there be an authenticated user, in index we are going to return all the thoughts associated with the user who has logged in, here we could define the relationships between this model and the User model, but let's go saving some time, here in store we are going to create a new Thought, we are going to assign as a description the description that is sent as part of the request we are going to associate this thought with the user who is authenticated and finally we will use save, for which is the update the user_id is not updated, here we look for the thought that has the indicated id, we modify its description and save. For what is the elimination, we look for the indicated thought and we eliminate it, then here, we are going to write route: list to see what are the routes that we currently have defined in our routes file, in the final part we see the routes associated with thoughts, we can make a GET request to attract all of them, a POST request to register a new one, we can make a PUT or PATCH request to update one of them and we can make a DELETE request to delete one of them. Although we have created a new migration, we have not yet executed this migration, we must do it to give origin to here, this-, this entire column has to also be unsigned without sign, to match the id that the users have, as it is likely that this has been left here in an inconsistent state we are going to connect to mysql and we are going to delete the database called thoughts to create it again. And now we do run the migrations, that 's it, well, I want us to always have an active user, even though we continually refresh, therefore I'm going to quickly create a Seeder here, we're going to call this Seeder and the only thing we'll do here is to register a user so that we always have one available. So here we execute said Seeder and we are here in our application again we have to connect it with the routes that we have defined, in such a way that the changes we make persist in the database, let's go first with the registry and the list of thoughts- the registration occurs here in the FormComponent, here in this method new newThought request the server to register a new thought, then here we will use axios.post, we will make the request towards this route, we will pass parameters to it and once we have received a response, we will display this response by console. So what parameters are we going to use? In this case, our list of parameters will consist only of a description, let's see if this request up to here works correctly and also in our controller, once the new thought has been registered we will return it so that its information is available and we can then access to the corresponding date and id, as I am in Peru, here I am going to modify the time zone for America / Lima, if not Laravel will use a totally different time system, then, we update and have the Chrome console open on the side left we are going to record a thought, the thought is visually recorded here but there is no request being made. A moment ago, even though we tried to register a new thought, after having added Axios, we could not see the result of the request here in the Network tab, this was because the browser has been using an old version of the Javascript file because it was By saving this old version in the browser's cache, to deactivate this cache you can click on this checkbox and you will no longer have that problem. Very good, so here we are going to update, I am going to write a new thought and this that we see here as Preview is what the API responds to us, it is what the server responds to us, it gives us a response in json with information from the new record that has just been created. So, using this is that we must generate the new thought here, if we go to the console, here in fact we are going to see all this information, this is the answer that Axios puts at our disposal and here we have data, this data is what which is actually responding to the server, everything else is added by Axios as information from the request we have made. So here we are going to do the following: we no longer have to define a thought variable ourselves, but rather this thought object can be obtained from the server's response, then, once the successful registration, we are going to emit the new event to update the most general component, with this we would have the registration implemented and we will now go to our most general component so that when we load this component initially we do not have any thoughts, but these thoughts are loaded from the database, we currently in our table have this record that we just registered a moment ago using Axios, we are also going to use Axios to obtain the list of thoughts in json format, we have programmed this before in our controller by making a return of all the registers of the thoughts model, then, we are going to make a request to this route and according to what the database returns us Let's show them here to the application. So, inside data, thoughts will be initially empty but here once we have loaded the component, we will make a GET request through Axios to this path, we do not need to pass any parameters and once we get a response, we will assign a value to our arrangement of thoughts, from the data that the server returns to us, we are going to update, and this information that we are having here is already coming from the database, we can confirm it because here the date now even shows us Until now, just today is 2 of month 5 and it is 8 in the morning in Peru, we are going to register a new data and we are going to update the page, we now see that the data is persisting in our database, we already have a record and we already have a list, we need to edit and delete to completely finish our CRUD, the idea to follow is the same, in this case we go to ThoughtComponent, here we have delete and here we have update, we can do the p Axios etitions here or we can do them here, in this case we are going to make the requests here and we are going to emit the events so that the information in the more general component is updated once the operation has been carried out in the database. So, to update we will say the following: axios.put here we will have thoughts and after thoughts we will have here the id, the id of the thought that we want to edit, in this case it would be this.thought.id and then once we get an answer we go to stop the edit mode and we are going to issue the update to the most general component, here we can also send the information of the new thought that is, when an update is made, we are going to return the thought object with its updated data and when it is done a delete, when the delete button is pressed, we will make a request of type delete to this same route and once we get a response, we will emit the delete event, in fact here we are not using response at all, therefore , we don't need that parameter. Okay, so now, we update, we have these two thoughts here, we are going to eliminate "abc", we update, there is no more "abc", we are going to edit this one that says "q", we are going to put this here, I am going to press save changes and apparently we have obtained an error, we go to the Network tab, we are going to make the request again and here we have this problem, it tells us that the description column cannot be null, what happens is that here in our PUT request, we are not passing any parameter, but now we are going to add it, we are going to send here the description of the thought capturing what the user has written here in this edit input. So we update, I am going to write here: "A true thought", well, here we missed this, this always to be able to access the data, we are going to edit here and as we see, this has just been updated correctly, the server in fact You have responded with the creation date and also with an update date, yes? That is, if we want we can also show the date of the last update, for this we would simply have to do the following here it says "Published in" and we are going to add "Last update" and we are going to show updated_at here, then we update and here we have a true thought that was originally posted on this date but was later updated seven minutes later, if we create a new thought, we have to both the registration and update dates are the same, we could put a condition so that if they are the same, it no longer shows the update, but those are details that can be left incorporating. Right now we have been delayed because it is the first CRUD that we are creating and we have done it step by step, as more practice is acquired we will be able to create much more interactive applications and in fact not apply Vue only to a page but to each of the sections that Our application requires or even, if we want the complete application to be fully interactive, we could rely on other libraries to configure a route system with Vue, right now we already have a fully functional CRUD using Laravel and using Vue. If you have found this syntax a bit confusing, this syntax here or even this syntax here that does not even use the word function at the beginning, I invite you to take the basic Javascript course that I have recently published, if you follow that course, All the code here will seem very understandable because in this course we are going to see from scratch different characteristics that the Javascript language presents. In addition, this video is an introduction so that later we can create much more complex applications, using Vue and Laravel, so if this video has seemed interesting to you, it has been helpful in some way, I would appreciate very much if you help me to share it with the intention of being able to publish more videos of this type here on the channel. Also, if you are not subscribed yet, I invite you to subscribe and be aware of more news that I will be sharing here on the channel. Well, thanks and until next time.
