Question

我使用this guide将VueJS添加到了Django项目中。

我现在正尝试将示例更改为我编写的一些代码，但没有任何变化： assets / js / components / Demo.vue

<template>
    <div>

        <p>This is just a Demo.</p>
    </div>
</template>

<script>
</script>

<style>
</style>

例如，如果我将此代码更改为：

<template>
    <div>
        <h1> test </h1>
        <p>TEST.</p>
    </div>
</template>

<script>
</script>

<style>
</style>

在前端，我将继续看到第一个代码段。

这是我的 index.js

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

import Vue from 'vue';
import Demo from "./components/Demo.vue";

    window.Vue = Vue;
    const app = new Vue({
        el: '#app',
        components: {
            Demo
        }
    });

这是我的Django模板，在其中称为Vue：

{% load render_bundle from webpack_loader %}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Django Vue</title>
</head>
<body>
    <h1>test</h1>

    <div id="app">
        <demo></demo>
    </div>
    {% render_bundle 'main' %}
</body>
</html>

Vue / JS代码的其他部分与此存储库基本相同，因为我遵循了指南https://github.com/michaelbukachi/django-vuejs-tutorial

我是否在控制台中缺少某些内容？我应该以某种方式更新我的JS / Vue代码吗？感谢您的任何帮助，谢谢！！

Answer 1

尝试做

    const app = new Vue({
        render: (h) => h(Demo)
    });
    app.$mount('#app')

并更改

    <div id="app">
        <demo></demo>
    </div>

到<div id="app"></div>

Vue代码未在我的Django / Vue项目中更新

1 个答案: