-
You need to define parts of your template as raw so that Jinja escapes that portion instead of trying to fill it up with its own context.
Here is how you need to do 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>Ref: http://jinja.pocoo.org/docs/dev/templates/#escaping
讨论(0) -
Use
{{ '{{ vue }}' }}I had the same problem, and also got it solved.
讨论(0) -
The other option is to redefine the delimiters used by Vue.js. This is handy if you have a lot of existing template code and you wish to start adding Vue.js functionality to a Flask or Django project.
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, delimiters: ['[[',']]'] })Then in your HTML you can mix your Jinja and Vue.js template tags:
<div id="app"> {{normaltemplatetag}} [[ message ]] </div>Not sure when the "delimiters" property was added, but it is in version 2.0.
讨论(0) -
Configure Vue v2 class instance with the 'delimiters' option:
<div id='myapp'> !{ message } </div> <script> let myapp = new Vue({ delimiters: ['!{', '}'], ...}); </script>Source: https://vuejs.org/v2/api/#delimiters
讨论(0) -
I know this is old post, and however @Nathan Wailes answer helped me. I further tried avoiding moustaches
{{myVal}}and usedv-text="myVar"for rendering text. And I did not need to override jinja delimiters. see example below:<!--Vuetify--> <v-btn class="ma-2" outlined color="indigo" v-text="connectToggleLabel"></v-btn> <v-btn class="ma-2" outlined color="indigo"><span v-text="connectToggleLabel"/></v-btn> <!-- basic --> <input type="button" :value="connectToggleLabel"/>Hope this help somebody
讨论(0) -
You can either change default VueJS or Jinja delimiters. I actually prefer to change VueJS delimiters like below:
new Vue({ el: '#app', delimiters: ['${', '}'] })Then you can use
${variable}instead of conflicting{{ var }}, see docs.This matches with ES6 template string style, so it is preferable I would say. Keep in mind that you will have to do same when you crate new components.
Alternatively, you could just bypass Jinja template rendering altogether. Just move your
index.htmlfrom templates directory to static directory (next to css, js files), then:@app.route("/") def start(): return app.send_static_file("index.html")If you are doing all view logic in VueJS, this can work.
讨论(0)
加载中...
- 热议问题