vue.jsvuejs2ampersand

What is the difference between v-html and v-text?

I had the following code using v-text:

<h1 v-text="content.title"></h1>

Output:

Brand Name is B&amp;C

So I fixed it using v-html in the previous line:

<h1 v-html="content.title"></h1>

Output:

Brand Name is B&C

My question is the following:

Why does it works using v-html and not v-text? I already read the Vue documentation but I don't clearly understand the difference.

Solution

  • v-text sets the textContent of the node. v-html sets the innerHTML of the element. &amp; is an HTML entity. If you want HTML entities interpreted and replaced, you need to have them interpreted as HTML and not text.