[Vuejs]-Vue.js Slug filter in link

4👍

You can’t apply a filter to only part of the expression; this calls for a method instead:

<a :href="`/products/${kebab(motorbike.title)}`">
methods: {
  kebab: _.kebabCase
}

Alternatively, if you want to invoke a filter on only part of the expression then you can do this instead (although I don’t recommend it):

<a :href="`/products/${$options.filters.kebab(motorbike.title)}`">

It’s also worth mentioning that filters will be removed in the next major version of Vue (version 3), so I would avoid using them.

Leave a comment