How do I make an HTML tag inside a data string render as an HTML tag?

Hi everybody!

I hope that somebody may be able to assist me in this issue :slight_smile:

How do I get a <br> tag inside a string in a VueJs data function to actually render as working html?

This is what I want to be able to do:

data () {
      return {
        cards: [
            title: 'Welcome to <br/> Arrow GTP'

And I want the <br> tag to actually be rendered as an html <br> and literally break the line. Right now, however, it is simply rendering as the literal characters and letters < br > and not an html tag.

How do I go about making this happen the way that I would like it to?

Thank you in advance for your assistance :slight_smile:



You can you, along with your Vue data property above:

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

The result will render as HTML: <p>Welcome to <br/> Arrow GTP</p> like you want.

I hope this helps


Woo hoo!


totally worked!

Thank you @jnash21! I thought it would be something that simple :smiley:



I think the {{ card.title }} is not even necessary, isn’t it?

1 Like

It’s not. It’s just a waste of space here.

1 Like

You need used

  • {{{ card.title }}}