在 VueJS 模板中显示 Django 模板答案

【问题标题】：Displaying Django templates in a VueJS template在 VueJS 模板中显示 Django 模板
【发布时间】：2019-12-22 22:44:28
【问题描述】：

我有以下 django 索引页面：

{% load render_bundle from webpack_loader %}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/3.8.95/css/materialdesignicons.css">
    <meta charset="UTF-8">
    <title>My test</title>
</head>
<body>


    <div id="app">
     <h1>TEST</h1>
    </div>

    {% render_bundle 'main' %}

</body>
</html>

这个模板应该调用我的 VueJS 前端，这样我就可以在我的 Django 模板上使用 Vue，这是被调用的 Vue 模板：

<template>

  <v-app id="sandbox">
    <v-navigation-drawer
      v-model="primaryDrawer.model"
      :clipped="primaryDrawer.clipped"
      :floating="primaryDrawer.floating"
      :mini-variant="primaryDrawer.mini"
      :permanent="primaryDrawer.type === 'permanent'"
      :temporary="primaryDrawer.type === 'temporary'"
      app
      overflow
    ><v-switch
        v-model="$vuetify.theme.dark"
        primary
        label="Dark"
      ></v-switch></v-navigation-drawer>

    <v-app-bar
      :clipped-left="primaryDrawer.clipped"
      app
    >
      <v-app-bar-nav-icon
        v-if="primaryDrawer.type !== 'permanent'"
        @click.stop="primaryDrawer.model = !primaryDrawer.model"
      ></v-app-bar-nav-icon>
      <v-toolbar-title>Vuetify</v-toolbar-title>

    </v-app-bar>


    </v-app>
</template>

这只是一个简单的 Vuetify 默认模板，与this 非常相似。

到目前为止，没关系，我可以看到页面，但在我的模板中看不到 Django 部分。为了调试它，我将 <h1> TEST </h1> 添加到我的索引页面，所以当我打开 http://127.0.0.1:8000/ 时，我应该看到 Vue 模板 + Django 模板。

问题是我没有看到<h1>。我认为 Vue/Vuetify 组件以某种方式隐藏了它，因为如果我从 Vue 部分删除所有内容，除了<template></template> 我会看到<h1>TEST</h1> 出现。

我需要解决这个问题，因为当然，我需要将我的 django 部分与 Vue 部分一起显示。有什么建议吗？

【问题讨论】：

标签： django vue.js vuetify.js

【解决方案1】：

当您使用 Vue 的 el 选择器时，您基本上是在告诉您去找到该选择器并将其替换为您的模板。所以 <div id="app"> 和它里面的所有东西都被你的 Vue 组件替换了。如果您希望渲染 Django 静态，只需将其移到 Vue div 之外。

【讨论】：

可以，但问题是即使在Vue模板之外我也看不到