Vue 구성 요소에서 JSON 텍스트용 HTML을 올바르게 렌더링합니다.

Vue 구성 요소에서 JSON 텍스트용 HTML을 올바르게 렌더링합니다.

간단한 HTML 마크업으로 구성된 소품 목록을 통해 반복하고 있습니다.

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

소품 중 하나는 이렇게 생겼는데

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

하지만 출력에서는<span>인쇄되어 적용되지 않습니다.

도움이 필요하신가요?

사용하다v-html지시:

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

참조: RawHTML

언급URL : https://stackoverflow.com/questions/49128035/render-html-properly-for-json-text-in-vue-component