Question

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

这是我的Vue文件：

ChatMessage.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 没有错误因为我已经在视图页面中检查了它。任何人都可以建议我这里有什么不对吗？

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组件未加载数据

1 个答案: