小编sam*_*ray的帖子

如何用Vue代替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>
Run Code Online (Sandbox Code Playgroud)

以上是我的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>
Run Code Online (Sandbox Code Playgroud)

上面是我的Vue代码,Jinja引发了一个异常,即'task'未定义,我希望是由Vue而不是Jinja呈现的html代码,我知道它可以在Laravel中完成:

"@{{task.body}}"
Run Code Online (Sandbox Code Playgroud)

由于我是Jinja的新手,任何人都可以帮助我吗?

html python jinja2 flask vue.js

23
推荐指数
5
解决办法
1万
查看次数

标签 统计

flask ×1

html ×1

jinja2 ×1

python ×1

vue.js ×1