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 ?

tony19 · Accepted Answer · 2022-07-15 00:36:17Z

12

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>

edited Jul 15, 2022 at 0:36

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 26, 2018 at 15:19

manoi

8085 silver badges11 bronze badges

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

2 Comments

tirta keniten Over a year ago

when I run npm run lint, warning appears warning 'v-html' directive can lead to XSS attack vue/no-v-html

manoi Over a year ago

yes thats right, and this is also documented in the docs from vue. So you should only use this if you can trust the source and never put in there user content.

tony19 · Accepted Answer · 2022-07-16 00:04:56Z

3

Yes, use v-html.

<v-card-text v-html="actu.body"></v-card-text>

edited Jul 16, 2022 at 0:04

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 26, 2018 at 15:17

pishpish

2,62418 silver badges23 bronze badges

Collectives™ on Stack Overflow

raw html in a vue js component (with nuxt)

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related