Vue组件未加载数据

Posted 2023-02-23

技术标签:

【中文标题】Vue组件未加载数据【英文标题】：Vue component not loading the data 【发布时间】：2017-06-19 01:05:38 【问题描述】：

我正在使用 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>

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

【问题讨论】：

【参考方案1】：

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

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

<script>
export default 

</script>
<style>
</style>

【讨论】：

@Hola您可以从问题中删除解决方案，我看到您在问题中添加了这个，如果其他人稍后查看这个问题会混淆。对，我想我已经检查过了！我已经编辑了..谢谢你的解决方案 @Saurabh 也许你可以帮助我。看看这个：***.com/questions/49664451/…

以上是关于Vue组件未加载数据的主要内容，如果未能解决你的问题，请参考以下文章