时间戳

首页 > 解决方案 > Vue 代码未在我的 Django/Vue 项目中更新

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

问题描述

我使用本指南将 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 代码吗？任何帮助表示赞赏，在此先感谢！

标签： djangovue.jsvuetify.js

解决方案

试着做

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

和改变

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

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

推荐阅读