Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v-html does not work with filters #4352

Closed
peterkorgaard opened this issue Nov 30, 2016 · 11 comments
Closed

v-html does not work with filters #4352

peterkorgaard opened this issue Nov 30, 2016 · 11 comments

Comments

@peterkorgaard
Copy link

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.

@yyx990803
Copy link
Member

2.0 filters only work in mustache tags and v-bind.

@SlyNet
Copy link

SlyNet commented Feb 1, 2017

How to implement a highlight that was simple in v.1:

{{{ option.title | highlight(searchTerm) }}}

with filter highlight that wrapped found text in spans?

@simplesmiler
Copy link
Member

@SlyNet put your highlight into methods, and v-html="highlight(option.title, searchTerm)".

@mtrunt
Copy link

mtrunt commented 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
Copy link
Member

Akryum commented Feb 18, 2017

Computed properties are the best way. You get automatic caching.

@Fridus
Copy link

Fridus commented Mar 1, 2017

You can use $options.filters :

v-html="$options.filters.highlight(option.title, searchTerm)".

@kirillgroshkov
Copy link

Fridus - works indeed! But looks like undocumented private API

@dsky1990
Copy link

dsky1990 commented Mar 5, 2017

@Fridus this works fine ,thx

@posva
Copy link
Member

posva commented 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
Copy link

@Fridus I really like this way to do it. No nasty mustache tags needed for this! Thanks!

@ppKrauss
Copy link

ppKrauss commented 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.

@vuejs vuejs locked and limited conversation to collaborators Mar 11, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests