Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 962 of the free egghead.io lessons, plus get Vue.js content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Create Filters in Vue.js

1:45 Vue.js lesson by

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!

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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!

Avatar
Ingvi Jonasson

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?

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.

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."

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.

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.

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.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?