Render html code

I have faqs array

const faqs = [{
    question: "Question 1 ",
    answer: "Answer 1",
},
...
]

Template

<Disclosure as="div" v-for="faq in faqs" :key="faq.question" class="pt-6" v-slot="{ open }">
...
</Disclosure>

My question is how to render html code into faqs elements?

rodrigo.pedra

3 years ago

Level 56

Not sure what you actually want, but if you want to render HTML code inside a Vue template, use the v-html directive:

<div v-html="variableHoldingHTMLString" />

Remember injecting HTML content can lead to XSS attacks, so if the content can be created by user input be sure to sanitize it first. You can do it server-side when saving these contents.

On the other hand, if what you want is to grab the rendered HTML from a Vue element, you can add a ref to its root element and grab it on the mounted hook:

<template>
    <VueComponent ref="myRef" />
</template>

<script>
export default {
    mounted() {
        console.log(this.$refs.myRef.$el.innerHTML);
    }
}
</script>

Check the docs for using refs with v-for, it is possible, but I don't remember out of my head, or wrap the generated content on a <div> add a ref to it and grab its innerHTML property.

Notes:

When using refs on native elements, such as <div>, you don't need to call .$el.
Calling $el will only work with components with a single root (Vue 3 allows multi root components)

Please or to participate in this conversation.