I am currently working on creating a base modal component that can be re-used, utilizing slots to insert the modal content. The issue I am facing is that when the modal is triggered by clicking a button, it displays without any content present. How can I ensure that my content appears within the designated slot? Am I misunderstanding how slots work?
To better illustrate my problem, here is a fiddle link: https://jsfiddle.net/70yyx8z2/19/
// registering the base modal component
Vue.component('modal', {
template: '#modal-template'
})
// registering the content component for the modal
Vue.component('modal-content', {
template: '#modal-content'
})
// initializing the Vue app
new Vue({
el: '#app',
data: {
showModal: false
}
})
<modal v-if="showModal" @close="showModal = false">
<h3 slot="header">Header goes here</h3>
<!--
How can I correctly utilize the slot to render the modal content component?
-->
<modal-content></modal-content>
</modal>