如何通过Vue而不是Jinja进行渲染 [英] How to render by 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>

这是我的html.我想改用Vue呈现代码.

This above is my html. I want to render the code by Vue instead.

<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提出了一个例外，即任务"未定义，我希望的是Vue而不是Jinja呈现的html代码，我知道可以用以下方法在Laravel中完成:

The above is my Vue code, and Jinja raise an exception that 'task' is undefined, what I hope for is that the html code rendered by Vue instead of Jinja, I know it could be done in Laravel with this:

"@{{task.body}}"

由于我是Jinja的新手，所以有人可以帮助我吗?

Since I am new to Jinja, could anyone help me out?

推荐答案

另一个选择是重新定义Vue.js使用的分隔符.如果您有很多现有的模板代码，并且希望开始将Vue.js功能添加到Flask或Django项目中，则这非常方便.

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: ['[[',']]']
})

然后在您的HTML中，您可以混合使用Jinja和Vue.js模板标签:

Then in your HTML you can mix your Jinja and Vue.js template tags:

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

不确定何时添加定界符" 属性，但它是2.0版.

Not sure when the "delimiters" property was added, but it is in version 2.0.

这篇关于如何通过Vue而不是Jinja进行渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！