CODEWITHSUNDEEP
vue.js
ottz0
ottz0

Reputation: 2605

Vue.js Slug filter in link

I've made a small vue.js filter and wraped it in a _lodash kebab-case to make my links SEO friendly when I pass restfull URL's like products/motor-bikes, however I can't wrap the filter within the binded href because it filters all of the url so I end up with products-motor-bikes. It applies the filter to the whole left side of expression.

How can I wrap my filter so it only applies to the binded value and not the string of products?

<a :href="'/products/'+motorbike.title+'' | kebab" class="c-sau-card__f-btn mt-3">Buy Now</a>

The filter

Vue.filter('kebab', function (string) {
 return _.kebabCase(string);
})

Upvotes: 0

Views: 388

Answers (1)

Decade Moon
Decade Moon

Reputation: 34306

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.

Upvotes: 4

Related Questions