将 vue js 应用程序绑定到 django 模板不显示任何内容

Question

我正在尝试将 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

<template>
  <h1>Test</h1>
</template>
<script>
export default {
  name: 'ProductFilterApp',
  components: {
  },
  props: {
  },
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>
<style scoped>
</style>

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

任何帮助将不胜感激。

Answer 1

实际上，您甚至不需要在视图中包含模板，只要您的 ID 为 #product-filter-app 的元素存在即可。试一试：

new Vue({
  el: '#product-filter-app',
  components: { ProductFilterApp },
  template: '<ProductFilterApp/>'
})

您可以从您的视图中删除<ProductFilterApp><ProductFilterApp/>。