Filters in Vue.js 2.0
Playing
01. Filters in Vue.js 2.0

Episodes

0%
Your progress
  • Total: 6m
  • Played: 0m
  • Remaining: 6m
Join or sign in to track your progress

Transcript

00:00
If you've been working with Vue.js you've very likely used filters and these are or were convenient ways to go ahead and apply things next to say a like count.
00:14
You'd be able to pluralize that so you'd see like if it was one like or likes if it was two likes. So what I'm going to do is I'm going to basically talk you through what I'm doing here which is an upcoming course. You can obviously follow this when it's out and then I'm going to show you two alternative ways to get around using filters or at least filters with packages and filters
00:36
with your own custom functions as well. So the way that this works then is I have a public timeline here. This is a series on event broadcasting with Laravel so we're using Laravel echo to do this and what I can actually do is go ahead and write something over here. What that will do is not only post it but it will broadcast it to all clients over web sockets.
00:58
So you can see here I can now like this and when I go ahead and click that the like button goes and that sends a request through to like that. Now inside of the posts that I have I actually have a like count and this is just an attribute set on the post model within Laravel. So this will return me the like count but the problem is I want to output likes here but I can't do
01:19
this in the traditional sense. Now let's just take a look at how this works. I'm going to say post dot like count and by the way this is a post component which is being included on this timeline component just here just to keep things nice and tidy. So I can now put post dot like count and if we give that a refresh we will actually see the like count here. We've got
01:39
none for this one and one for each of these. However what I used to be able to do is something like the following. So I used to be able to say post dot like count and then I used to be able to use the pluralized filter like so and then just give in the singular version of this or in this case it would be a like. So let's give this a refresh and we will see or we should see an
02:01
error. There we go. So fail to resolve filter pluralize. So the problem here is that quite simply these have been removed and we're not going to go into the reasons. There's a huge github thread on there so you can go ahead and have a look but what we want to do is still be able to do this and in the cleanest most convenient way possible. So first of all let's take a look at
02:21
this pluralized library. We can install this obviously via npm. So this will basically pluralize and singularize any word. So very very simple and it's very very easy to use. There's some usage notes down here as well. Now the first thing we would obviously do is go ahead and install this. I happen to already have this pulled into my dependencies list and it's already installed
02:43
with npm. So let's take a look at how we may think about using this and then we'll go on to look at how we actually make this work. So I would say import pluralize from pluralize and you may think well what we can actually do in this case is just go ahead and call it like this. So the usage of this if we just take another look is to basically pass in the singular version and
03:07
then the count. So really really straightforward to use this. So in this case I would say like and then I would go and pass in post dot like count. Okay so let's take a look at this and we will see an error and that is pretty much because we can't go ahead and just directly use imported items here within templates. So the question is how do we do this? Well it's actually very simple.
03:32
You may already know that we have the ability to define out methods inside of our components. So for example over on the like button, this is again a separate component, I have a method here which likes something when this button here is clicked. So very very straightforward. Now in here all we actually need to do is go ahead and define out what we've imported and that will then put it
03:57
in the scope of this template so we can go ahead and use it. So it really is that simple but stick around if you want to see how to create your own custom filters as well. So now that I've done this obviously what we can do as well is create other methods here as well. So just create them as you normally would and do whatever you need. You can call these from your templates as well. Okay so
04:17
now that I've done this then let's go and take a look at our browser and you can see here that this happens to have worked. So we've got zero likes here and obviously we've got the singular version of it just here. Brilliant. So that's all well and good but what happens if you are not pulling in a library? Well let's get rid of this and let's create a silly example so we can see how we might
04:38
define our own custom filters. So what I would typically do in this case and you can separate these out further, I would create some kind of a filters js file just inside of here and of course separate these out if you need them. If this starts to get too long you'd probably want to break them up. What we can now do is start to define out just normal functions because that's
05:00
pretty much what filters were anyway. We won't go too much into it but that's pretty much what they were. So what I can do now then is go ahead and let's just find to find out a greeting function just to be quick and let's accept a name in here and go ahead and return hello and then just go ahead and concatenate on the name. So really simple. Now to use this elsewhere we're going to go ahead
05:23
and export greeting and if you were to define others you can go ahead and define these in here as well. Okay so now all we need to do is just go over to the template we want to use this in and we want to import and then import the name of that function from and then just choose that file. So we go back a directory because we're currently in components and we just pull in filters we don't
05:44
need the js extension there. Now what we can do is in here define out that filter, go ahead and use it in here and we are good to go. So let's go ahead and do this so greeting and let's say Alex. So come over here give that a refresh and you'll see hello Alex. So hopefully that's helpful if you are using Vue.js 2 now you know how to pull in filters in a similar way to how we could use them before.

Episode summary

In this episode, we dive into filters in Vue.js 2.0 — or rather, what to do now that they've been removed from the framework! If you've worked with Vue before, you might remember filters as a really handy way to, for example, pluralize a like count directly in your template — showing "1 like" vs. "2 likes". With their removal, though, that nice, clean syntax is gone, so what now?

First, we look at how things used to work and see the classic "fail to resolve filter" error. Then, I show you how to handle the pluralization use case by pulling in the pluralize npm package. We walk through importing the library, using it in our component's methods, and making the pluralization happen right where we need it.

Next, if you don't want to bring in an external package, we see how easy it is to make your own filter-like functions. I show you how to make a basic greeting function in a separate filters.js file and bring it into any component you like. Just import, call it from your template, and you have the same effect you'd get from the old-style filters.

So, whether you're dealing with like counts or any bit of text transform, this episode covers how to keep your Vue 2 apps clean and readable, even with filters out of the picture.

Episode discussion

No comments, yet. Be the first!