Vue is automatically escaping html characters

Question

here's one of my computed methods:

            filtered() {
                return this.groups.map(group => {
                    return group.replace(this.search, '<span class="has-background-primary">' + this.search + '</span>');
                })
            }

This is supposed to highlight text in a searchbox, but the < is escaped to <. What should i do to suppress escaping or how can I do it better?

wha r u trying to do because as it looks from here you can do this with v-if — Reşit Körsu
– Reşit Körsu, Commented Oct 3, 2018 at 16:09
I'm trying to highlight searched text. if I have 'mozambik' in the list and 'zam' in searchbox i want to have moZAMbik, where caps letter are highlighted so it should look like: Mo<span class="has-background-primary">zam</span>bik — Zbyszek Kisły
– Zbyszek Kisły, Commented Oct 3, 2018 at 16:11
Might be similar to this. stackoverflow.com/questions/30877491/vue-display-unescaped-html — Stephen Gilboy
– Stephen Gilboy, Commented Oct 3, 2018 at 16:27

Jns · Accepted Answer · 2018-10-04 06:58:36Z

7

You're on the right track. The only thing missing is a v-html at the place where you render your result/list.

<div v-for="item in items" v-html="item">
  <!-- if the item now contains raw html it will not be escaped -->
</div>

I've created a small fiddle for demonstration: http://jsfiddle.net/6bto2nkv/

answered Oct 4, 2018 at 6:58

Jns

3,2871 gold badge20 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zbyszek Kisły Over a year ago

that was it, I tried with triple braces, but I guess that was old syntax

Jns Over a year ago

Yes, in vue 2.0 the triple moustache has been deprecated

Collectives™ on Stack Overflow

Vue is automatically escaping html characters

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related