raw html in a vue js component (with nuxt)

Question

I receive inside the object passed in my component a body (actu.body) with html tags inside (mostly p tags) and im wondering how to interpret them for the client side, my code is like that for now :

<template>
  <div>
  <!-- {{ actu }} -->
  <v-parallax
    :src="actu.images[0].url"
    dark
  >
  <v-layout
    align-center
    column
    justify-center
  >
  <h1 class="display-2 font-weight-thin mb-3">{{ actu.headline }}</h1>
    <h4 class="subheading">{{ actu.summarry }}</h4>
  </v-layout>
  </v-parallax>
  <v-card>
    <v-card-text>
      {{ actu.body }}
    </v-card-text>
  </v-card>
  </div>
</template>


<script>
export default {
props: {
actu: {
  type: Object,
  required: true
}

} };

is there a proper way to do that with vue js ?

Answer 1

have a look at the official guide: https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML

the trick is the v-html directive

<span v-html="rawHtml"></span>