Vue JS: inyectar HTML en vista

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:

<div id="app">
  <h2>Probar HTML inyectado:</h2>
  <div v-html="miHtml"></div>
</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í:

new Vue({
  el: "#app",
  data: {
  	miHtml: `<strong>Soy HTML</strong> y puedo
    <br>Ser
    <br>Inyectado
    <br>
    en Vue. Aquí un link:
    <a href="//parzibyte.me/blog">parzibyte.me/blog</a>`,
  },
  methods: {
  	
  }
})

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 aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

1 comentario en “Vue JS: inyectar HTML en vista”

Dejar un comentario

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