Блог

Я пытаюсь привязать компонент vue js к файлу HTML-шаблона django, но он не показывает никакого содержимого. Я не получаю никакой ошибки. Просто пустой компонент.

Вот мой HTML-шаблон django:

 {% 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>
 

Веб-пакет успешно генерирует приложение, нет никакой ошибки, а просто отображается пустой компонент в соответствии с снимком экрана.

Любая помощь будет оценена по достоинству.

На самом деле, вам даже не нужно включать шаблон в свое представление, пока там есть ваш элемент с идентификатором #product-filter-app . Попробуй это сделать:

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

И вы можете удалить <ProductFilterApp><ProductFilterApp/> из своего поля зрения.