2.7 Finishing the Component

The last thing I want to do is put the entire form in our component because it just makes sense to do so. And you could arguably say that, well, we should've done that to begin with. And yeah, you'd be right. However, this is software development. We can plan, but plans ultimately change. So there are a few things that we're going to have to take into account because this form is being used for creating and editing. So there are some differences. Of course the action URL is going to be different, the HTTP method is going to be the same. However, for the edit field, we need to be able to specify that we want to simulate a put request, so we're going to have to take that into account. And then probably the most important thing, Is the CSRF token. We definitely need to include that. So let's start by passing some data here. Or rather, no, let's not start here. Let's start in our component. And instead of using this div element to contain everything, let's just go ahead and make that our form. That makes sense to do so. And let's go ahead and say action. But action is going to be bound to whatever we pass to it. So we will say action. And then the value is going to be a prop that we will call actionUrl, for the lack of a better term. And then the method is going to be POST. Now we also need the CSRF token. So let's go ahead and add that here. This is going to be an input element, that is, a hidden input element. The name needs to be _token. And then the value, which once again we need to bind, is going to be called csrfToken. So these are two props that we need to add, actionUrl and csrfToken. So let's go ahead and add those to our list. And then we will pass that data to our component. Now, ultimately what I want to do is completely get rid of our partial view. So that's inside of the create and the edit views. We are including our component there. Now, you could also make the argument that our errors should be inside of the component as well. And I would agree with that. However, I have done a lot of just passing data from blade to our components, and we all know how to do that. So in order to save time, we're just going to copy and paste the errors into the individual views. That's not the ideal solution, but there you go. So let's just copy and paste all of that stuff into the create. And we will pass in that information. So we need the action-url. Now, I'm not going to use the binding syntax here. We did that here primarily because we're passing in JSON data. But in the case of the action-url and the csrf-token, it's just normal everyday data. So I'm not going to use the binding syntax. And really, this is mostly useful for whenever you're using data between parent and child components and we're not doing that. So we're going to take our call to the route function and that's going to give us the URL. And then we need to specify the csrf-token, and that is going to be equal to calling the csrf_token function. And there we go. So we can get rid of the include. Actually, we can get rid of everything here except for that h1 element that has the title of the page. We'll leave that alone. And we should also probably change the name of this component as well, because this is now not just the form fields, but the pages form. We'll just do that a little bit later. I want to make sure that the form is working before we start making any other changes. So let's just take this. Let's go to the edit Vue and let's paste that in as well. And of course we need to change the value that we passed for the action-url. So we will make that change, the csrf-token is going to be fine. Now, this is where we do need to specify that we need to simulate the puts request. And with Laravel, that was simply called method-field, let's call it the same thing here. So we will simply add in another prop called method-field and we will give that a value of put. And with that done, let's just go ahead and get rid of our form. And we'll leave everything else there. So we do need to implement this prop. So let's go to our component and let's add that. And the prop name is methodField, camel cased. And then we need to include that element here. Now Laravel is going to generate another hidden input field. And in this case it's called _method. So let's go ahead and do that. But let's use the v-if. And let's put the v-if, let's make this the first attribute, just so that we can see that, hey, we can see that this is conditional here. So here we will say methodField. If we have methodField, then bind the value to methodField. That should work. So with that done, let's actually see what this looks like in the browser. So everything looks okay. This is editing a page, so let's edit this and let's mark it as edited. Just so that we can see that there was a change here. So we will submit and it looks like that was successfully edited. So it looks like we didn't break anything. That's always a wonderful thing. And then let's create a new page. So here, we will, This is a new page 3. The URL, I don't care what it is and the content will just be content. So let's submit that, and once again, we can see that everything worked fine. And so now let's just change the name of the component, because it is no longer just the form fields. This is the entire form, so let's call it PagesForm instead of fields. And of course, we need to not only change the name of the file, although you could say that we don't need to change the name of the file, but I want to. And we need to go to app.js, we need to change the path to that file. And we also need to change the name of the components. Now it is just pages-form. So that inside of the create view, we get rid of the fields. And inside of the edit view, we get rid of the fields. So once again, let's go to the browser. Let's refresh, although we didn't need to refresh that page. And let's go to the Edit Page, that's fine. Let's go to the Create Page. And that is fine as well, and so now we have a complete component. It has everything that we need in order to work with our pages, either create or edit them. So that now if we decided that we needed that form for something else, we can just drop that component in, give it the data it needs, and we are good to go.