how to render loaded html text with classname inside vuejs

Question

I try to render some html text loaded in a json file.

the textstring holds an class="" css style

"example": word 1<br><span class=\"main-color\">word 2</span> word 3"

the vuejs part looks like this:

<p v-html="example">  </p>

the scoped css:

.main-color  {
  color: #ff00ff;
}

the html code looks as expected in debugger, but the text was not rendered! why?

tauzN · Accepted Answer · 2021-09-14 19:33:44Z

1

You are missing a " at the start of the variable

This works

<script setup>
import { ref } from 'vue'
const example = ref("word 1<br><span class=\"main-color\">word 2</span> word 3")
</script>

<template>
<p v-html="example">  </p>
</template>

<style>
.main-color  {
  color: #ff00ff;
}
</style>

edited Sep 14, 2021 at 19:33

answered Sep 14, 2021 at 18:13

tauzN

7,4872 gold badges22 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

how to render loaded html text with classname inside vuejs

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