模板未在 Django 提供的 Vue 中呈现 [重复]

Question

我有一个用于后端的 Django 应用程序，它以 Vue 作为前端来呈现模板。我在 django 中的视图代码有以下部分：

# thing/views.py
def index(request):
    template = loader.get_template('thing/index.html')
    return HttpResponse(template.render({}, request))

# thing/urls.py
from django.views.generic import TemplateView

urlpatterns = [
    path('', TemplateView.as_view(template_name='index.html')),
]

# some other files that complete the project are not included

index.html中有如下代码：

<div id="app">
    <p v-if="quotaRemaining > -1">
        Remaining: {{ quotaRemaining }}
    </p>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            quotaRemaining: 42,
        },
    });
</script>

当我访问此页面时，唯一呈现的是：

剩余：

虽然我希望它是

剩余：42

为什么我的 Vue 模板在由 Django 提供服务时无法正确呈现？如何让它发挥作用？

Answer 1

Django 有自己的template language，它有一个variables 的概念。它将{{ quotaRemaining }} 视为一个 Django 变量，甚至在它到达前端（到 Vue）之前就对其进行处理。至少有两种解决方案。

1. 带有{% verbatim %}标签的环绕Vue相关代码：

   停止模板引擎渲染这个块标签的内容。一个常见的用途是允许与 Django 的语法发生冲突的 JavaScript 模板层。

   {% verbatim %}
   <p v-if="quotaRemaining > -1">
       Remaining: {{ quotaRemaining }}
   </p>
   {% endverbatim %}
   

2. 自定义 Vue delimiters 并在您的客户端代码中使用这些分隔符：

   <!-- template code -->
   <p v-if="quotaRemaining > -1">
       Remaining: ${ quotaRemaining }
   </p>
   
   // js code
   const app = new Vue({
       el: '#app',
       delimiters: ['${', '}'],
       data: {
           quotaRemaining: 42,
       },
   });