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

4 Likes
#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

14 Likes
#3

Woo hoo!

This:

Screen Shot 2017-06-21 at 10.31.30 PM.png820×240 20 KB

totally worked!

Screen Shot 2017-06-21 at 10.33.01 PM.png1072×350 448 KB

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

R

5 Likes
#4

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

1 Like
#5

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

1 Like
#6

You need used

  • {{{ card.title }}}