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:

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.

Directiva v-for en Vue JS

Resumen En este post te mostraré cómo repetir cosas en la vista de una app con Vue.JS usando v-for. v-for permite iterar arreglos, objetos y también hacer ciclos. Veremos cómo usar v-for, además de proporcionar la clave con :key y finalmente tomar el índice y el valor por separado. Nota:…

agosto 15, 2019

En "HTML"

Filtros en Vue.js: tutorial con ejemplos

Uso de los filtros en Vue JS En este post te voy a mostrar cómo declarar y usar los filtros en Vue.js: un buen framework de JavaScript. Los filtros en Vue.js Un filtro, al menos para estos términos, transforma datos en la vista. Por ejemplo, muestra una cadena en mayúsculas.…

agosto 15, 2019

En "HTML"

Toast con Vue.js – Notificaciones

En este post de programación con el framework Vue te mostraré cómo mostrar notificaciones, avisos o toasts usando la librería llamada vue-toasted que nos permitirá mostrar pequeños cuadros como notificaciones. Mostrar notificaciones con Vue Comenzaré diciéndote que puedes encontrar más información y detalles en el repositorio oficial. Lo primero que…

noviembre 18, 2020

En "javascript"