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

Posted 2023-02-23

【中文标题】将 vue js 应用程序绑定到 django 模板不显示任何内容

【英文标题】：Binding vue js app to django template not showing any content

【发布时间】：2021-11-22 10:02:13

【问题描述】：

我正在尝试将 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 正在成功生成应用程序，没有任何错误，只是根据屏幕截图显示空组件。

任何帮助将不胜感激。

【参考方案1】：

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

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

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

【讨论】：

我也尝试过这种方式，但是不行。

收到错误Do not use 'new' for side effects no-new 知道吗？

@patel887 哦，很奇怪——这听起来像是一个 eslint 错误。你有一个叫做“no-new”的 linting 规则吗？

不，我没有添加任何名为 no-new 的规则

它现在没有给出任何错误但仍然没有加载。我需要 django 方面的任何东西吗？