web-dev-qa-db-ja.com

Jinjaの代わりにVueでレンダリングする方法

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

これが私のhtmlです。代わりにVueでコードをレンダリングします。

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

上記は私のVueコードであり、Jinjaは 'task'が未定義であるという例外を発生させます。代わりにVue= Jinjaの場合、Laravelでこれを行うことができます。

"@{{task.body}}"

私はJinjaが初めてなので、誰か助けてくれませんか？

pythonhtmlflaskvue.jsjinja2
22
samray

もう1つのオプションは、Vue.jsで使用される区切り文字を再定義することです。これは、既存のテンプレートコードが多くあり、Vue.js機能をFlaskまたはDjangoプロジェクトに追加し始める場合に便利です。

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

次に、HTMLで、JinjaとVue.jsのテンプレートタグを混在させることができます。

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

"delimiters" プロパティがいつ追加されたかはわかりませんが、バージョン2.0にあります。

54
eezis

テンプレートの一部をrawとして定義する必要があります。これにより、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">
        {% raw %}{{task.body|e}}{% endraw %}
    </li>
  </ul>
</template>

参照： http://jinja.pocoo.org/docs/dev/templates/#escaping

30
Mani

Flaskを使用している場合、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

使用する {{ '{{ vue }}' }}

私は同じ問題を抱えていましたが、解決しました。

3
Aniket G

Vue 'delimiters'オプションを使用してv2クラスインスタンスを構成します。

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

ソース： https://vuejs.org/v2/api/#delimiters

3
Daniel Sclearuc