Vue: Using filters inside attributes with Vue 2.0

[callumacrae]

Both of the following work in Vue 1:

<a href="{{ 'something' | linkHandler }}">link</a>
<a :href="'something' | linkHandler">link</a>

Neither of them work in Vue 2.0, because you can only use filters inside interpolations, and you can't use interpolations as attributes anymore.

Any way around this?

[happyDemon]

You could use a computed property

[callumacrae]

Kinda defeats the point in using a filter, though. I don't want to declare 30 computed properties, and I don't want to declare duplicate methods across multiple components.

[iagafonov]

@callumacrae declare method in mixin (and use it) or in Vue.prototype like Vue.prototype.$linkHandler = function (value) {....} and use <a :href="$linkHandler('something')">link</a>

[sqal]

https://github.com/vuejs/vue/issues/2756#issuecomment-246712696

[callumacrae]

@iagafonov: How is that not a workaround? What are filters for?

I'd suggest that you should either be able to be able to use filters everywhere—which would mean allowing interpolations as attributes when there is a filter—or filters should be removed. The current behaviour is confusing.

[yyx990803]

This has been discussed extensively during the 2.0 API design thread - please read that thread, most of the arguments have been raised already. Filters were originally to be removed but added back for the most common use case due to community request. It's not going to change in the foreseeable future.

[nghiepit]

It work with <a :href="$options.filters.linkHandler('somthings')">link</a>

[callumacrae]

Thank you for changing your mind on this 🙌 🙌 🙌

[vijaypws]

Its not working for me.
my code is :

<p v-html="getHtml('status')"></p>

I want to apply caps helper.

i have columns like body, title and status, and i want to apply only on status column.

i tried this :

<p v-html="$options.filters.caps(getHtml('status'))"></p>

any idea ?

[adamreisnz]

If the $options.filters.xxxxx workaround works, then why on earth make us jump through hoops and not just support filters directly in attributes?

[michtio]

Also I see a lot of use for filters in attributes ... certain words going to lowercase as css class for example

[posva]

This is quite old but filters can be used in v-bind directives as well as text interpolation: https://vuejs.org/v2/guide/filters.html