Como sabemos, las plantillas de Vue no permiten colocar contenido HTML, y cualquier cadena HTML que se coloque será saneada para evitar posibles ataques, XSS entre ellos.

Sin embargo Vue provee una manera fácil y sencilla de inyectar HTML “inseguro” en un componente o vista, y justamente es lo que veremos en este post.

Insertar HTML en Vue

Para esto podemos usar v-html. Al usar esto, podremos inyectar HTML dentro del contenedor en el que se coloque la directiva. Por ejemplo, tenemos un div:

Al mismo le indico que el HTML que tendrá es el que esté en mi variable miHtml. Eso debe estar declarado en mi app, así:

Tengo el HTML como cadena; ignora el uso de las backticks, podría ser con comillas normales; el punto es que al montar la app se inyectará el HTML:

Mostrar HTML en Vue usando v-html

Y si cambio el HTML desde la aplicación, se reflejará, justo como si fuera simple texto. Este HTML puede ser estático, venir de una base de datos, de una petición AJAX, etcétera.

Sé que es simple y tal vez un poco obvio, pero tal vez alguien (como yo antes de escribir esto) no sepa cómo hacerlo.

Si quieres puedes probar el ejemplo en JSFiddle.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Relacionado:  Parámetros en URL de Vue Router

Únete a otros 702 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: