2.3 Writing Component Methods

In the previous lesson, we converted a Blade partial view into a View.js component. And we did so rather easily and painlessly, but we did end up with a slight little issue. Our drop-down box that lists our pages so that we can choose the ordering of our pages is just a normal list. There's no formatting here where there was formatting so that we could see the relationship between parent and child pages. And if we look at the page list, we can see that formatting being used here. And let's just quickly create another one. I'm going to call the title that This is a New Page. The URL is going to be /this-is-a-new-page, let's put this before FAQ. And then for the content, it doesn't matter what is here, we just want something there. And we can see that that page was created. So thankfully, we didn't break anything by converting our partial view into a view component. And we can order these pages however we want, but the key thing is that we can see the relationship. We can see that there is no child for the new page that we created. However, there is a child for the FAQ page, and we want that to be reflected inside of this drop-down box. Now, this was being done by a presenter, and it's also being done by the same presenter in the page list. So let's briefly look at that. If we go to the App folder, inside of there, there's Presenters, and then a class called PagePresenter. These were methods for presenting certain pieces of data inside of the views for the pages. And the method that we are concerned with is this paddedTitle. Now you can see that it is taking the depth of a page. Now the depth is based upon, well, its depth. If it has a depth of zero, then it's at the very top. There is no parent for that page. However, if it has a depth of one, than it is a direct descendant of a page with a depth of zero. And if that page had a depth of two, or if it had a child, then that page would have a depth of two, and so on and so forth. So it's just a way of specifying how deep a page is in the hierarchy. And that depth was being used in order to determine how many spaces are going to appear before the title. So with something with a depth of one, there are four spaces before the title. And so we essentially want to take this and turn it into JavaScript, something that we could use within our component itself. So if we have a property called props, and we define our props with that. It kind of makes sense that we would have a property called methods, so that we could define our methods that we can then use inside of our components. So it's simply called methods, and then we write a method. So let's call this paddedTitle, or since this is not really a presenter, this is going to be a method that we're going to use to pad the title. Let's give it an action name, padTitle. And we need the page that we want to work with, because if we look at the old code, we used a page object's depth property, as well as the title. Now, I'm not going to go into how this presenter works, but basically, we could use these properties from the page class that we were working with. Well, we don't have that luxury here. We need to know what page that we're working with. So we're going to pass that to this method, and we're going to create a variable that's going to store the string that we want to use as a space. So we have the HTML entity of a non-breaking space. That is really what we need to use so that we can visually see a space in the browser. But in the PHP code, we used this string repeat function. And we have something very similar in JavaScript now. Now that we have our space or the string that is going to represent our space, we can call this repeat method, which was introduced with ES 2016. And all we have to do is specify how many times that we want to repeat that particular string. And that is with our depth times four, or at least however many spaces you want to display for each depth. So we will just concatenate that with the title, and of course we need to return this, otherwise, it's rather pointless. But there we go. So it's the same idea as far as concept is concerned, we're just doing with JavaScript. So now whenever we output the title, instead of just using the title, we can call that padTitle method, we can pass in the page. And that's going to kind of work. It's going to get us closer to what we want. However, whenever we look at the drop-down, well, of course, the two pages that are at the top of the hierarchy, they're fine. But notice what happened to the contact page. Now we can see that we have [LAUGH] the actual HTML entities being output here. So we're a step closer. We just want this to be rendered as HTML, not as text, and that's easy enough to do. Instead of using our double curly braces to output that information, instead, we want to tell view that this is HTML, treat it as HTML. So we're going to add an attribute to this option element. We're going to say v-html, and the value is going to be calling the padTitle method, and then passing in the page. So let's go back, let's refresh the page, and we now have our formatting. So not only can we define properties for our components, we can also define methods. And that will definitely become useful in coming lessons. However, in the next lesson, we are going to start adding validation to our form. Because we have server side validation, and we should always have server side validation. But it would be nice if we could perform validation on the client, so that we could give users immediate feedback.