Create Filters in Vue.js

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>