I’m trying to replace a (WordPress) shortcode string that comes from a REST API.
Now I want to replace ‘[faq]’ with a Vue 3 component called ‘FAqItem’.
For this, I use the function resolveComponent().
This is my code:
const html = ref(props.data.text)
const FaqItem = resolveComponent('FaqItem')
if (html.value.includes('[faq]')) {
html.value = html.value.replace('[faq]', FaqItem);
}
Then in my template I use:
<div class="block prose xl:mt-12" v-html="html"></div>
Now this seems to work, but the replace function is returning [object Object]
.
How can I make this show my component itself?
It’s important that only the [faq] is replaced.
Thanks in advance!