Estoy tratando de renderizar un componente desde una cadena, pero no tuve éxito. Mis códigos están abajo:
<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> Intenté renderizar componente con h y compilar pero devolvió object object
Estás usando mal la función h aquí. h() devuelve un nodo virtual que debe usarse dentro de una función render() en lugar de una plantilla. No necesita una <template> o <v-html> en absoluto en este caso:
//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>