1

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

这是我的 Vue 文件：

聊天消息.vue

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

<script>

</script>
<style>
</style>

这是刀片chat.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没有错误，因为我已经检查过它在视图页面中。谁能建议我这里有什么问题？

4

1 回答 1

1

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

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

<script>
export default {
}
</script>
<style>
</style>
于 2017-02-02T05:35:49.467 回答