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!
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?
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>