Binding vue js app to django template not showing any content

user_4956204 0
Viewed 337

I am trying to binding vue js component into django HTML template file, but it is not showing any content. I am not getting any error. Just blank component.

Here is my django HTML template:

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

Here is my vue js app. 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')

Here is ProductFilterApp.vue

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

Web-pack is generating app successfully there is not any error but just showing empty component as per screen shot.

enter image description here

Any help will be appreciated.

vue-component vue.js django html
1 Answers

Actually, you shouldn't really even need to include the template in your view, as long as your element with ID of #product-filter-app is there. Give this a shot:

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

And you can remove <ProductFilterApp><ProductFilterApp/> from your view.

user_41556960
Related