Create Filters in Vue.js

Greg Thoman
InstructorGreg Thoman

Share this video with your friends

Send Tweet

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!

Ingvi Jonasson
Ingvi Jonasson
~ 4 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
~ 4 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
~ 4 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
Antonio
~ 3 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>