Introducing Vue Filters 0:00Okay, let's move on and discuss filters in this episode. So we'll go back to our home view, and you'll see right here we deferred to a postedOn function. So we provided the status, and that simply fetches the createdAt date, and then runs it through the moment library, so that we can format it relatively. So if we come back, we can basically say that the purpose of this function is to format the string in some way. All right, well, as it turns out, we can use Vue's filter syntax instead, like this. We're going to have the status createdAt, but now I'm going to filter, or pipe it, to a custom filter that we can set up. It can be anything we want, like date, or relative date, or even a go, if we want. Defining Custom Filters 0:37a custom filter that we can set up. It can be anything we want, like date, or relative date, or even a go, if we want. Now, we can define them either globally, or on each individual component, and that's useful if you have a filter that really only makes sense for a single component. So we can say set up a filter called a go, and that's going to accept the value that you piped to it. So in this case, it's going to accept the createdAt time. We'll just call it the date. All right, now we just format it. I can grab that, paste it in, and then update this. Replacing Method With Filter 1:04All right, now we just format it. I can grab that, paste it in, and then update this. All right, so that means I can get rid of this entirely. Let's save it. It should recompile. Whoops, we're missing a comma here. There we go. All right, and that should be all there is to it. So we used this pipe syntax to reference a filter that the previous string should be sent through. Stacking Multiple Filters 1:23So we used this pipe syntax to reference a filter that the previous string should be sent through. And when you think of filters, literally, just think of them as simple functions. So that means you can stack as many as you want. Take this string, pipe it to the ago filter, and then pipe it to another filter altogether, if you need to. So if I come back to Chrome, and if we give this a refresh, we get the exact same thing as we did before. But yeah, filters are maybe a better use for this particular need. So like I said, if you wanted to continue piping, you know, to use the obligatory capitalize Adding Capitalize Filter 1:47But yeah, filters are maybe a better use for this particular need. So like I said, if you wanted to continue piping, you know, to use the obligatory capitalize example, once again, you would just define another one here. And now I will return value to uppercase. And that should do it. So now we'll get a month ago, but in all caps. Pretty useful. All right, and that's all there is to it when it comes to filters. So in closing, you reference a filter using the pipe symbol, and you can stack as many of them as you want.So in closing, you reference a filter using the pipe symbol, and you can stack as many of them as you want. Next, for each filter you define, of course it has to be placed within your filters object of the component. And really, that's all there is to it.
