I am working with a VueJS component called comp.vue:
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
data () {
return {
}
},
}
</script>
When I use this Vue component, the slot content is displayed as shown below:
...
<comp>as a title</comp>
<comp>as a paragraph</comp>
...
My goal is to modify the content of comp.vue's slot before it gets rendered. Specifically, I want to wrap the slot content in different HTML elements based on its contents.
If the slot contains the word "title," then it should be enclosed in an <h1> tag:
<h1>as a title</h1>
If the slot contains "paragraph," then it should be wrapped in a <p> tag:
<p>as a paragraph</p>
Is there a way to dynamically change the slot content of the component before it renders?