Create Filters in Vue.js

Greg Thoman
InstructorGreg Thoman

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 4 years ago

Just like in the command line, you can pipe a property through a filter to get a desired result. You can even chain them together!

[00:00] Here's a list of dinosaurs. Notice that some start with an uppercase letter and others don't. We can use Vue.js filters to fix this issue. Let's start out by adding more to our template. We'll add a span here that shows the dinosaur's name and his weight. Then we'll add a Wikipedia link to the bottom.

[00:18] At this point we're in a world of trouble. Let's start cleaning this up by capitalizing all of our titles. We need to create a block called "filters" in our component. Let's create a function called "capitalize" that accepts a param called "value."

[00:34] After verifying that value is not empty and it is indeed a string, we'll return a version of it that begins with a capital letter. Now in Vue.js, filters only work inside the handlebar syntax of a template. We'll invoke the filter by piping it to capitalize. We'll do the same thing in our h4.

[00:55] Now that our titles are fixed, let's move on to the spans. We want them to be under cased. Let's create a new filter function called "under case." We'll pass a value into it. We'll do the same empty and string checking as before, and return a lower case version of the string.

[01:10] In our span, let's go ahead and pipe to under case. We'll do the same thing in our anchor. One of the powerful things about filters in Vue.js is you can chain them together. Let's create URL filter. That filter's also going to take a value. After our glorious string empty combo, we're going to return a wiki link.

[01:32] Let's chain these guys together. We're going to remove the old link. After under case, we're just going to pipe it to URL. That way dino.text moves through both the under case and URL filters.

Ingvi Jonasson
Ingvi Jonasson
~ 5 years ago

The wikipedia url does not get passed into the href of the <a>. When I do so I get an unexpected absolute url. I tried using v-bind:href but without any luck. Anyone has an idea for a workaround?

Antonella
Antonella
~ 5 years ago

Hi Ingvi, I had the same problem. The only way I could find to solve it was to use a method instead.

Inside your Vue instance, below the filters, you can add:

methods: { wikiUrl(dino) { return 'https://en.wikipedia.org/wiki/' + dino;
} }

The HTML looks like this:

<a v-bind:href="wikiUrl(dino.text.toLowerCase())">{{ dino.text | undercase | url }}</a>

Antonella
Antonella
~ 5 years ago

Sorry, the formatting was bad in the previous message and the Edit link is not working. The HTML is:

<a v-bind:href="wikiUrl(dino.text.toLowerCase())">{{ dino.text | undercase | url }}</a>

Antonio Cunanan
Antonio Cunanan
~ 4 years ago

I was able to get it working with the following: <br> <a v-bind:href="dino.text | lowercase | url">{{ dino.text | lowercase | url }}</a>