Utilizando Vue con Django: Binding


Si estas comenzado con Vue y utilizas DjangoTemplates como tu backend de plantillas, la pregunta que seguramente esta pasando por tu mente es: si las variables de django las expreso como {{mi_variable}} y el data binding en vue lo expreso de la misma forma {{mi_data}} ¿como evito que Django cambie mis etiquetas de Vue?

Tranquilo que has llegado al lugar correcto

Ejemplo probado con:

  • Vue.js 2.x
  • Django 1.10.x

Escapar el contenido

Para fortuna de todos en Django existe la etiqueta de plantilla verbatim, que nos permite escapar el contenido o dicho de otra forma indicarle a nuestro motor de templates que lo incluido dentro de ella no debe ser procesado.

Imaginemos que en Vue tenemos algo como esto:


var vueApp = new Vue({
  el: '#div-mensaje',
  data: {
    mensaje: 'Esto es un mensaje'
  }
})

Y en nuestro template lo único que tendríamos que hacer es lo siguiente:


<div id="div-mensaje">
{% verbatim %}
{{ mensaje }}
{% endverbatim %}
</div>

&nbsp;

Y listo, todo funcionará según lo esperado

 

¿Qué pasa si quiero escapar contenido HTML?

 

Imaginemos que nuestro mensaje tuviese etiquetas HTML:


var vueApp = new Vue({
  el: '#div-mensaje',
  data: {
    mensaje: 'Esto es un mensaje <br/> Esto también es un mensaje'
  }
})

Si lo ejecutamos veriamos algo como esto:

Esto es un mensaje <br/> Esto también es un mensaje

Que dista mucho de lo que en realidad queremos que ocurra.

Para nuestra fortuna existe otra forma de hacer el binding, que es utilizando v-html=“mi_data” esta etiqueta nos permite imprimir el contenido como HTML, entonces nuestro template quedaría de la siguiente forma:


<div v-html="mensaje" id="div-mensaje">

</div>

Como ves exiten multiples formas de solucionar el problema del binding.

Si buscas más información te recomiendo consultar la documentación correspondiente:

https://vuejs.org/v2/guide/syntax.html#Raw-HTML

https://docs.djangoproject.com/en/1.10/ref/templates/builtins/
 

{lang: 'es'}

Dejar un comentario

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