Skip to content

v-html does not work with filters #4352

Closed
@peterkorgaard

Description

@peterkorgaard

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

yyx990803 commented on Nov 30, 2016

@yyx990803
Member

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

SlyNet

SlyNet commented on Feb 1, 2017

@SlyNet

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

simplesmiler commented on Feb 1, 2017

@simplesmiler
Member

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

mtrunt

mtrunt commented on Feb 18, 2017

@mtrunt

What if I have a filter that outputs HTML? Do I have to use a computed property or is there a better way?

Akryum

Akryum commented on Feb 18, 2017

@Akryum
Member

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

Fridus

Fridus commented on Mar 1, 2017

@Fridus

You can use $options.filters :

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

kirillgroshkov commented on Mar 4, 2017

@kirillgroshkov

Fridus - works indeed! But looks like undocumented private API

dsky1990

dsky1990 commented on Mar 5, 2017

@dsky1990

@Fridus this works fine ,thx

posva

posva commented on Mar 5, 2017

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

arivera12

arivera12 commented on Aug 24, 2017

@arivera12

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

deleted a comment from kakulukia on Mar 9, 2018
ppKrauss

ppKrauss commented on Mar 11, 2018

@ppKrauss

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.

locked and limited conversation to collaborators on Mar 11, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @SlyNet@yyx990803@simplesmiler@posva@mtrunt

        Issue actions

          v-html does not work with filters · Issue #4352 · vuejs/vue