Render HTML properly for JSON text in Vue component

Question

I am iterating through a list of props that consists of simple HTML markup

<div class="columns medium-4 large-4" v-for="keyOffer in keyOffers">
  <p>{{ keyOffer.head }}</p>
  <p>{{ keyOffer.sub }}</p>
</div>

and one of the props looks like this

keyOffers: [
  {
    id: 'offerSecond',
    head: '4G network',
    sub: 'Dedicated to bringing you the <span class="u_underline">best mobile service</span>
  },
]

but in the output the <span> gets printed and not applied.

Any help?

tony19 · Accepted Answer · 2022-07-15 20:17:09Z

14

Use v-html directive:

<div class="columns medium-4 large-4" v-for="keyOffer in keyOffers">
  <p>{{ keyOffer.head }}</p>
  <p v-html="keyOffer.sub"></p>
</div>

Ref: RawHTML

edited Jul 15, 2022 at 20:17

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Mar 6, 2018 at 10:10

Sajib Khan

24.4k9 gold badges69 silver badges79 bronze badges

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

Collectives™ on Stack Overflow

Render HTML properly for JSON text in Vue component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related