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

Comments

Projects
None yet
@peterkorgaard

peterkorgaard commented Nov 30, 2016

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

This comment has been minimized.

Show comment
Hide comment
@yyx990803

yyx990803 Nov 30, 2016

Member

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

Member

yyx990803 commented Nov 30, 2016

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

@yyx990803 yyx990803 closed this Nov 30, 2016

@SlyNet

This comment has been minimized.

Show comment
Hide comment
@SlyNet

SlyNet 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?

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

This comment has been minimized.

Show comment
Hide comment
@simplesmiler

simplesmiler Feb 1, 2017

Member

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

Member

simplesmiler commented Feb 1, 2017

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

@mtrunt

This comment has been minimized.

Show comment
Hide comment
@mtrunt

mtrunt 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?

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

This comment has been minimized.

Show comment
Hide comment
@Akryum

Akryum Feb 18, 2017

Member

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

Member

Akryum commented Feb 18, 2017

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

@Fridus

This comment has been minimized.

Show comment
Hide comment
@Fridus

Fridus Mar 1, 2017

You can use $options.filters :

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

Fridus commented Mar 1, 2017

You can use $options.filters :

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

This comment has been minimized.

Show comment
Hide comment
@kirillgroshkov

kirillgroshkov Mar 4, 2017

Fridus - works indeed! But looks like undocumented private API

kirillgroshkov commented Mar 4, 2017

Fridus - works indeed! But looks like undocumented private API

@dsky1990

This comment has been minimized.

Show comment
Hide comment
@dsky1990

dsky1990 Mar 5, 2017

@Fridus this works fine ,thx

dsky1990 commented Mar 5, 2017

@Fridus this works fine ,thx

@posva

This comment has been minimized.

Show comment
Hide comment
@posva

posva Mar 5, 2017

Member

@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 🙂

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

This comment has been minimized.

Show comment
Hide comment
@arivera12

arivera12 Aug 24, 2017

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

arivera12 commented Aug 24, 2017

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

@ppKrauss

This comment has been minimized.

Show comment
Hide comment
@ppKrauss

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

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.