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?

Answer 1

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/