I'm trying render a component from string but I didn't succeed. My codes are bellow:
<template>
<div v-html="beautifyNotification(notification)"></div>
</template>
<script>
import { Link } from '@inertiajs/inertia-vue3'
import {compile,h} from "vue"
export default {
components: {
},
props: {
notifications: Object
},
methods: {
beautifyNotification (ntfction) {
return h(compile(`<Link :href="`+ntfction.from.username+`"
class="h6 notification-friend">`+ntfction.from.name+`
</Link>, commented on your new
<Link href="#" class="notification-link">profile status</Link>.`))
},
}
}
</script>
I tried render component with h and compile but it returned object object
You're using the h function wrong here. h() returns virtual node that is meant to be used inside a render() function instead of a template. You don't need a <template> or <v-html> at all in this case:
//no template element
<script>
import { Link } from '@inertiajs/inertia-vue3'
import {compile,h} from "vue"
export default {
props: {
notifications: Object
},
render() {
return h(
// abbreviated template string for brevity
compile('<Link href="#" class="notification-link">profile status</Link>.')
)
}
}
</script>