How to visualize Vue instead of Jinja
<template id="task-template"> <h1>My Tasks</h1> <tasks-app></tasks-app> <ul class="list-group"> <li class="list-group-item" v-for="task in list"> {{task.body|e}} </li> </ul> </template> This is above my html. Instead, I want to make Vue code.
<script> 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', }); </script> The above code of my Vue and Jinja throws an exception that the "task" is undefined, what I hope is that the html code displayed by Vue instead of Jinja, I know that this can be done in Laravel with this
"@{{task.body}}" Since I'm new to Jinja, can anyone help me out?
You need to define parts of your template as raw so that Jinja avoids this part, instead of trying to fill it with its own context.
Here's how you need it:
<template id="task-template"> <h1>My Tasks</h1> <tasks-app></tasks-app> <ul class="list-group"> <li class="list-group-item" v-for="task in list"> {% raw %}{{task.body|e}}{% endraw %} </li> </ul> </template> Another option is to override the delimiters used by Vue.js. This is useful if you have a lot of existing template code and you want to start adding Vue.js functionality to your Flask or Django project.
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, delimiters: ['[[',']]'] }) Then, in your HTML, you can mix Jinja and Vue.js template tags:
<div id="app"> {{normaltemplatetag}} [[ message ]] </div> Not sure when the "delimiters" property is added, but it is in version 2.0.
If you use Flask, you can override the delimiters used by 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__)"