Vue: Html entities are automatically escaped

[rayfranco]

It seems that Vue.js templating language auto-escape strings. I made a filter that wrap urls to links, but the printed results is escaped html.

I couldn't find any mention of this in the docs.

Is there a way to avoid escaping? Should'nt it be a filter instead? Like this:

<p>{{ unsafe_string | escape }}</p>

[yyx990803]

You can use {{{ unsafe_string }}} for raw html. (docs here: http://vuejs.org/guide/#Mustache_Bindings in the third note box)

[InstanceOfMichael]

How would you do something like:

{{{ unsafe_string | escape | customfilter }}}

?

[rayfranco]

@InstanceOfMichael This answer was only for Vue 1.x. But if you are using Vue 2.x, you should use computed properties to apply filters combined with v-html.

http://vuejs.org/guide/syntax.html#Raw-HTML

[InstanceOfMichael]

Like this?

<template v-html.customfilter="unsafe_string"></template>

I'm not sure how that allows to run a filter after escaping.

[rayfranco]

@InstanceOfMichael no, you can use computed properties as said in the docs.

Instead of doing

export default {
  data () {
    return {
      unsafeString: '<p>Hello World</p>'
    }
  }
  filters: {
    customFilter (val) {
      // ...
      return something
    }
  }
}

<div>{{{ unsafeString | customFilter }}}</div>

You can do something like

export default {
  data () {
    return {
      unsafeString: '<p>Hello World</p>'
    }
  }
  methods: {
    customFilter (val) {
      // ...
      return something
    }
  }
  computed: {
    filteredUnsafeString () {
      return this.customFilter(this.unsafeString)
    }
  }
}

<template v-html="filteredUnsafeString"></template>

or

<template v-html="customFilter(unsafeString)"></template>

That being said, I really like the old {{{ unsafeSring }}} syntax.
@yyx990803 was this discussed somewhere to understand the reason of its removal?

[InstanceOfMichael]

But that runs the escape after the custom filter instead of before.

[itsMapleLeaf]

If you need to escape before, use an HTML escape function.

[InstanceOfMichael]

If you need to escape before, use an HTML escape function.

Why not use the one built-in to VueJS instead of adding an extra dependency?

[anselmobattisti]

Use an em with v-html="yourcomputedpropertie" it my help you

<em v-html="ativo"></em>

[trevorgehman]

I, too, am wondering how to use Vue's built-in HTML escape functionality in a computed property. I have a user-supplied input that I need to 1) escape, 2) replace certain unicode characters with images, 3) output the final HTML in the template.

I can accomplish 2 and 3 fine in a computed property, but like @InstanceOfMichael said, I think using Vue's built-in HTML escaping functionality would be ideal, if that's possible.

[Erbolking]

It looks like that vue uses the following under the hood:

let decoder

export default {
  decode (html: string): string {
    decoder = decoder || document.createElement('div')
    decoder.innerHTML = html
    return decoder.textContent
  }
}

https://github.com/vuejs/vue/blob/dev/src/compiler/parser/entity-decoder.js