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


#1

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:

R


#2

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
Jon


#3

Woo hoo!

This:

totally worked!

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

R


#4

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