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, Oct 03 '18 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: Mozambik — Zbyszek Kisły, Oct 03 '18 at 16:11
Might be similar to this. https://stackoverflow.com/questions/30877491/vue-display-unescaped-html — Stephen Gilboy, Oct 03 '18 at 16:27

score 6 · Accepted Answer · answered Oct 04 '18 at 06:58

6

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 04 '18 at 06:58

Jns

3,189
1
18
23

that was it, I tried with triple braces, but I guess that was old syntax – Zbyszek Kisły Oct 04 '18 at 08:32
Yes, in vue 2.0 the triple moustache has been deprecated – Jns Oct 04 '18 at 08:35

Vue is automatically escaping html characters

1 Answers1