如何用 Vue 代替 Jinja 渲染

Question

<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 引发了一个异常，即“任务”未定义，我希望由 Vue 而不是 Jinja 呈现的 html 代码，我知道它可以在 Laravel 中完成：

 "@{{task.body}}"

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

原文由 ramsay 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

不确定何时添加了 “分隔符” 属性，但它是在 2.0 版中。

原文由 eezis 发布，翻译遵循 CC BY-SA 4.0 许可协议