Create Filters in Vue.js
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.
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>
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>
I was able to get it working with the following: <br>
<a v-bind:href="dino.text | lowercase | url">{{ dino.text | lowercase | url }}</a>
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 usingv-bind:hrefbut without any luck. Anyone has an idea for a workaround?