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?

Answer 1

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