Cómo renderizar por Vue en lugar de Jinja

 

My Tasks

  • {{task.body|e}}

Este de arriba es mi html. Quiero hacer el código por Vue en su lugar.

  Vue.component('tasks-app', { template: '#tasks-template', data: function() { return { list: [] } } created: function() { $.getJson('/api/tasks', function(data) { this.list = data; }) } }) new Vue({ el: 'body', });  

Lo anterior es mi código Vue, y Jinja genera una excepción que dice que ‘task’ no está definido, lo que espero es que el código html generado por Vue en lugar de Jinja, sé que podría hacerse en Laravel con esto:

 "@{{task.body}}" 

Ya que soy nuevo en Jinja, ¿podría alguien ayudarme?

La otra opción es redefinir los delimitadores utilizados por Vue.js. Esto es útil si tiene una gran cantidad de código de plantilla existente y desea comenzar a agregar la funcionalidad Vue.js a un proyecto de Flask o Django.

 var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, delimiters: ['[[',']]'] }) 

Luego, en su HTML puede mezclar sus tags de plantilla Jinja y Vue.js:

  
{{normaltemplatetag}} [[ message ]]

No estoy seguro de cuándo se agregó la propiedad “delimitadores” , pero está en la versión 2.0.

Debe definir partes de su plantilla como sin formato para que Jinja escape de esa parte en lugar de tratar de llenarla con su propio contexto.

Así es como necesitas hacerlo:

  

Ref: http://jinja.pocoo.org/docs/dev/templates/#escaping

Si está utilizando Flask, puede redefinir los delimitadores utilizados por Jinja:

 class CustomFlask(Flask): jinja_options = Flask.jinja_options.copy() jinja_options.update(dict( variable_start_string='%%', # Default is '{{', I'm changing this because Vue.js uses '{{' / '}}' variable_end_string='%%', )) app = CustomFlask(__name__) # This replaces your existing "app = Flask(__name__)" 

Configure la instancia de la clase Vue v2 con la opción ‘delimitadores’:

 
!{ message }

Fuente: https://vuejs.org/v2/api/#delimiters

Utilice {{ '{{ vue }}' }}

Tuve el mismo problema, y ​​también lo resolví.