链接中的 Vue.js Slug 过滤器

Question

我制作了一个小的 vue.js 过滤器并将其包装在 _lodash kebab-case 中，以使我的链接在通过产品/摩托车之类的完整 URL 时对 SEO 友好，但是我无法包装过滤器在绑定的href中，因为它过滤了所有的url，所以我最终得到了products-motor-bikes。它将过滤器应用于表达式的整个左侧。

如何包装我的过滤器，使其仅适用于绑定值而不适用于产品字符串？

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

过滤器

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

Answer 1

您不能只对表达式的一部分应用过滤器；这需要一个方法：

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

methods: {
  kebab: _.kebabCase
}

或者，如果您只想在表达式的一部分上调用过滤器，那么您可以这样做（尽管我不推荐这样做）：

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

另外值得一提的是，过滤器将在 Vue 的下一个主要版本（版本 3）中移除，所以我会避免使用它们。