How to parse <br> in a string to html tag in VUE.js

Question

I use {{}} in Vue.js to render my data to HTML. But now I got a string in my data, and I want the
tags in that string can be parsed into HTML tags when rendering data.

data(){
  return {
    bodyText: 'aaaaaa<br>aaaaaa'
}
}

<p>{{bodyText}}</p>

I want the content in span tag is like :

aaaaaa
aaaaaa

But the result is : aaaaaa<br>aaaaaa

tony19 · Accepted Answer · 2022-07-15 20:00:51Z

25

I think it should work using this:

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

edited Jul 15, 2022 at 20:00

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Apr 10, 2019 at 14:24

lwolf

4844 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Govind Totla Over a year ago

If you are using eslint in your project you may lead to a warning while using v-html. 'v-html' directive can lead to XSS attack vue/no-v-html to avoid this you can use it as follows-  <div v-html="bodyText"></div>

bwobbones Over a year ago

I wonder about the security implications of this, seems like a valid warning to me.

lwolf Over a year ago

of course, in this case you have to make sure that no malicious code can be inserted. But there are definitely use-cases where rawHTML is the right way.

tony19 · Accepted Answer · 2022-07-15 20:21:40Z

18

Use v-html directive:

<p><span v-html="bodyText"></span></p>

edited Jul 15, 2022 at 20:21

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Apr 10, 2019 at 14:22

akuiper

216k33 gold badges363 silver badges380 bronze badges

Comments

Muthukumar · Accepted Answer · 2020-12-15 19:20:59Z

1

You can make it still simple by using inside the p tag itself

<p v-html="bodyText"></p>

answered Dec 15, 2020 at 19:20

Muthukumar

6547 silver badges9 bronze badges

Comments

dmvstar · Accepted Answer · 2021-10-26 20:41:51Z

0

My example html

<td>
    <span v-html="getInfo(item)"></span>
</td>

script

getInfo: function (item) {
   return "One line<br />Next line"
}

answered Oct 26, 2021 at 20:41

dmvstar

413 bronze badges

Collectives™ on Stack Overflow

How to parse <br> in a string to html tag in VUE.js

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related