模板没有在Vang中呈现,由Django提供

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有自己的模板语言,它有变量的概念.它将它视为{{ quotaRemaining }}Django变量,并在它到达前端(到Vue)之前对其进行处理.至少有几种解决方案.

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

   停止模板引擎呈现此块标记的内容.常见的用途是允许JavaScript模板层与Django的语法冲突.

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

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

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