首页 文章

为什么我的VueJs组件没有显示在前端？

提问于
浏览 次
1

我正在尝试在当前的django项目中实现vuejs . 它有点工作 . 但是我想要一个更干净的结构并使用vuejs组件 .

但是组件没有出现在前端 .

所以这里我有我的基本vue组件（来自vueify-laravel示例）

<template>
    <div>
        <h1>Hello, {{ name }}</h1>
        <input type="text" v-model="name">
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                name: 'Laracasts'
            };
        }
    };
</script>

<style>
    h1 {
        color: red;
    }
</style>

在我的app.js中我有

var Vue = require('vue')
import Greeter from './components/Greeter.vue'

new Vue({
    el: '#app',

    components: {
        greeter: Greeter
    }
});

最后在我的一个django模板中

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

我安装了vue dev工具，它向我显示了根节点，然后是greeter节点 . 但没有任何内容 . app容器也是空的 .

javascript django vue.js

1 回答

  • 9

    如果模板来自django，那么你必须逃避 {{ 和 }} . 要关闭模板解析，请使用 {% verbatim %} ，或者也可以使用 {% templatetag openvariable %} （然后使用closevariable） .

    尝试：

    {% verbatim %}
<template>
    <div>
        <h1>Hello, {{ name }}</h1>
        <input type="text" v-model="name">
    </div>
</template>
{% endverbatim %}
    回复于

相关问题