web-dev-qa-db-fra.com

Comment rendre par Vue au lieu de 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>

C'est ci-dessus mon html. Je veux rendre le code par Vue à la place.

<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>

Ce qui précède est mon code Vue, et Jinja soulève une exception selon laquelle "tâche" n'est pas définie, ce que j'espère, c'est que le code html rendu par Vue à la place de Jinja, je sais que cela pourrait être fait en Laravel avec ceci:

"@{{task.body}}"

Depuis que je suis nouveau à Jinja, quelqu'un pourrait-il m'aider?

pythonhtmlflaskvue.jsjinja2
22
samray

L'autre option consiste à redéfinir les délimiteurs utilisés par Vue.js. C'est pratique si vous avez beaucoup de code de modèle existant et que vous souhaitez commencer à ajouter la fonctionnalité Vue.js à un projet Flask ou Django.

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

Ensuite, dans votre code HTML, vous pouvez mélanger vos balises de modèle Jinja et Vue.js:

    <div id="app">
      {{normaltemplatetag}}
      [[ message ]] 
    </div>

Vous ne savez pas quand la propriété "délimiteurs" a été ajoutée, mais elle se trouve dans la version 2.0.

54
eezis

Vous devez définir des parties de votre modèle comme raw afin que Jinja échappe à cette partie au lieu d'essayer de le remplir avec son propre contexte.

Voici comment vous devez le faire:

<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>

Réf: http://jinja.pocoo.org/docs/dev/templates/#escaping

30
Mani

Si vous utilisez Flask, vous pouvez redéfinir les délimiteurs utilisés par 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__)"
9
Nathan Wailes

Utilisation {{ '{{ vue }}' }}

J'ai eu le même problème et je l'ai aussi résolu.

3
Aniket G

Configurez Vue instance de classe v2 avec l'option 'délimiteurs':

<div id='myapp'> !{ message } </div>
<script>
let myapp = new Vue({ delimiters: ['!{', '}'], ...});
</script>

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

3
Daniel Sclearuc