Question

我有以下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部分一起显示。有什么建议吗？

Answer 1

使用Vue的el选择器时，基本上是在告诉您找到该选择器并将其替换为模板。因此<div id="app">及其内部的所有内容都将替换为您的Vue组件。如果要渲染Django静态对象，只需将其移至Vue div之外即可。

在VueJS模板中显示Django模板

1 个答案: