Closed
Description
Vue.js version
2.1.3
Reproduction Link
https://jsfiddle.net/peterkorgaard/t1Lxnwoq/16/
Steps to reproduce
In my fiddle I have added a filter and two uses of it. One with v-html and one with mustache interpolations. The first one (v-html) returns 0 and throws an error in the console. The latter prints the html code produced by the filter - but it is of course not rendered as html, because this is not supported with mustache interpolations. The example with v-html, on the other hand, should render as html.
What is Expected?
Rendered html
What is actually happening?
Vue does not recognize the filter when using v-html. For the record. The same thing happens when using v-text.
Activity
yyx990803 commentedon Nov 30, 2016
2.0 filters only work in mustache tags and v-bind.
SlyNet commentedon Feb 1, 2017
How to implement a highlight that was simple in v.1:
with filter
highlight
that wrapped found text in spans?simplesmiler commentedon Feb 1, 2017
@SlyNet put your
highlight
intomethods
, andv-html="highlight(option.title, searchTerm)"
.mtrunt commentedon Feb 18, 2017
What if I have a filter that outputs HTML? Do I have to use a computed property or is there a better way?
Akryum commentedon Feb 18, 2017
Computed properties are the best way. You get automatic caching.
Fridus commentedon Mar 1, 2017
You can use
$options.filters
:kirillgroshkov commentedon Mar 4, 2017
Fridus - works indeed! But looks like undocumented private API
dsky1990 commentedon Mar 5, 2017
@Fridus this works fine ,thx
posva commentedon Mar 5, 2017
@Fridus You can safely rely on that:
$options
are the options passed to the Vue constructor when creating a vm (so any component or new Vue). From that point on is just javascript 🙂arivera12 commentedon Aug 24, 2017
@Fridus I really like this way to do it. No nasty mustache tags needed for this! Thanks!
ppKrauss commentedon Mar 11, 2018
The solution
"$options.filters.highlight(option.title, searchTerm)"
is ugly, the pipe,as in
<p v-html="message | toHTML"></p>
,is need to be orthogonal... Seems a LANGUAGE DESIGN BUG.