我正在尝试将Vue JS组件绑定到Django HTML模板文件中，但它没有显示任何内容。我没有得到任何错误。只有空白组件.

下面是我的Django HTML模板：

{% load render_bundle from webpack_loader %}
{% render_bundle 'product-filter-app' %}

{% block section_more %}

<section id="section_more" class="guide_section">

    <div id="product-filter-app">
        <product-filter-app></product-filter-app>
    </div>

</section>

{% endblock %}

这是我的Vue JS应用程序。main.JS

import Vue from 'vue'
import * as Sentry from '@sentry/browser'
import 'vue-select/dist/vue-select.css'
import ProductFilterApp from './ProductFilterApp'
import { sentryOptions } from '@/utils/settings'
if (process.env.VUE_APP_MODE !== 'dev') {
  Sentry.init(sentryOptions)
}
new Vue({
  components: { ProductFilterApp }
}).$mount('#product-filter-app')

这里是ProductFilterApp.vue

<代码><；模板>；<；H1>；测试<；/H1>；<；/模板>；<；脚本>；导出默认{名称：' productFilterApp '，组件：{},道具：{},数据（）{返回{}},方法：{}}<；/脚本>；<；样式范围>；<；/样式>；

Web-Pack正在成功生成应用程序，没有任何错误，只是根据屏幕截图显示空组件。

任何帮助都将不胜感激。

顺晟科技：

实际上，只要ID为<template> <h1>Test</h1> </template> <script> export default { name: 'ProductFilterApp', components: { }, props: { }, data () { return { } }, methods: { } } </script> <style scoped> </style> 的元素存在，您甚至不需要在视图中包含模板。试一试：

#product-filter-app

您可以删除<代码>amp；lt；ProductFilterApp amp；gt；amp；lt；产品过滤器应用程序/>；从您的视图中。