I have the following vue component:
<template>
<div class="message__overlay">
<div class="message__overlay-content">
<div class="message__overlay-content-top">
<span class="message__overlay-close" @click="hideMessage"></span>
<h2>{{ title }}</h2>
<div v-html="content"></div>
</div>
<div class="message__overlay-content-bottom">
<a :href="`tel:${phoneNumber}`" class="message__overlay-link">Call Customer Services</a>
</div>
</div>
</div>
</template>
<script>
import SiteConstants from '../../Constants/site-constants.js';
import './styles.scss';
export default {
name: 'MessageOverlay',
props: {
title: {
default: '',
type: String,
},
phoneNumber: {
default: '',
type: String,
},
},
methods: {
hideMessage() {
document.body.classList.remove(SiteConstants.Classes.MessageOpen, SiteConstants.Classes.OverlayOpenWithPhoneLink);
},
}
};
</script>Which I can use by registering and doing the following:
<message-overlay :title="'Notice!'" :phone-number="0123456789">
<p>To place orders, an agreement needs to be in place for new projects. </p>
<p>Please call our dedicated customer service team who will be happy to discuss and set this agreement up for future orders.</p>
</message-overlay>
How do I get the 2 paragraph tags (or any content between the message-overlay tags) in the child component to render in the div with v-html="content" of the parent component template?