Is it able to compile HTML for a slot?

Hi, I need to pass rendered HTML code to a slot and I don’t know how to achieve that.
I was thinking of doing something like this:
(parent component):

<app-alert  :show="alert.showAlert"
                    :typeOfAlert="alert.type"
                    :width="'50%'"
                    @onCloseAlert="closeAlert">
            <template v-slot:title>
                {{ alert.title }}
            </template>
            <template v-slot:message v-html="alert.message">
             <!-- I want this to compile a String into HTML -->
            </template>
</app-alert>

And this is how the child template looks like:

<template>
    <div class="alert py-4">
        <div class="container" :style="{'width': width}">
            <div class="notification" v-if="show" :class="typeOfAlert">
                <button class="delete" @click="onCloseAlert"></button>
                <header>
                    <h1 class="title is-4 mb-0">
                        <slot name="title"></slot>
                    </h1>
                </header>
                <p>
                    <slot name="message"></slot>
                </p>
                <slot></slot>
            </div>
        </div>
    </div>
</template>

It seems you already have your answer:

https://stackoverflow.com/questions/64397178/is-it-able-to-compile-html-for-a-slot

Please don’t post the same question in different places at the same time. Just because you haven’t received a reply here doesn’t mean people haven’t invested time trying to help you with a problem you’ve already solved.

2 Likes

I don’t see any problem on posting the same issue at different communities. Maybe here I can get a different solution for the same problem.