Search code examples
vue.jsvue-component

How to escape content in vuejs?


I'm using webpack template for my vuejs project (vuejs: version 2). I would like to know how can I render my content escaped (other way than v-html) :

Note that the message contains some <a> tags like : These is my website <a href="https://google.com">link</a>.

Like in handlebars, I want to use something like :

<p>{{{ message }}}</p> and <p>{{{ message | customFilter }}}</p>.

I've tried the first option but it doesn't work. Is there any way to make it work with triple mustaches?


Solution

  • According to the docs:

    In order to output real HTML, you will need to use the v-html directive

    So it sounds like you can't do it with the mustache-syntax.

    If you want to combine filters with directive bindings, use a computed property.