Vue 组件没有加载数据

Question

我正在使用 Vue 组件测试 Laravel 5.4。但是问题是 Vue 组件没有显示在视图页面中。

这是我的 Vue 文件：

ChatMessage.vue

<template>
    <div>
        <p>Message text is here</p>
        <small>Author Name</small>
    </div>
</template>

<script>

</script>
<style>
</style>

这里是bladechat.blade.php

<html>
    <head>
        <title>Chat Rool</title>
        <link rel="stylesheet" href="css/app.css">
    </head>
    <body>
        <div id="app">
            <h1>Chat Room</h1>          
            <chat-message></chat-message>
        </div>
        <script src="js/app.js" charset="utf-8"></script>
    </body>
</html>

这是我的app.js

require('./bootstrap');

Vue.component('chat-message', require('./components/ChatMessage.vue'));

const app = new Vue({
    el: '#app'
});

没有加载错误app.js 因为我已经在查看页面中检查过了。谁能告诉我这里出了什么问题？

Answer 1

在您的 ChatMessage.vue 中，您只需要导出一个空对象，因为没有任何其他属性，如下所示：

<template>
    <div>
        <p>Message text is here</p>
        <small>Author Name</small>
    </div>
</template>

<script>
export default {
}
</script>
<style>
</style>

Vue 组件没有加载数据

Vue component not loading the data

laravel

vue.js

vue-component

laravel-5.4