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

Posted 2023-02-23

【中文标题】模板未在 Django 提供的 Vue 中呈现 [重复]

【英文标题】：Template not rendered in Vue served by Django [duplicate]

【发布时间】：2019-01-06 01:44:35

【问题描述】：

我有一个用于后端的 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 提供服务时无法正确呈现？如何让它发挥作用？

【参考方案1】：

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

带有% verbatim %标签的环绕Vue相关代码：

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

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

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

<!-- template code -->
<p v-if="quotaRemaining > -1">
    Remaining: $ quotaRemaining 
</p>

// js code
const app = new Vue(
    el: '#app',
    delimiters: ['$', ''],
    data: 
        quotaRemaining: 42,
    ,
);

【讨论】：

偶尔也可以使用 quotaRemaining ...

@JonClements，不错，但没有编译：Could not parse the remainder: ' quotaRemaining' from ' quotaRemaining'

哦，是的...那么请忽略我...不知道我在想什么模板语言，或者我是否只是以某种方式梦想出来:)