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

为什么当Django提供服务时，我的Vue模板无法正确呈现？我该如何运作？

Answer 1

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

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

阻止模板引擎呈现此block标记的内容。通常的用途是允许JavaScript模板层与Django的语法冲突。
```
{% 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,
    },
});

Django未在Vue中呈现模板

1 个答案: