javascript - 将用户列表发送到我的 Messenger 页面并使用 ChatApp.vue 组件在页面 (messenger.blade.php) 中显示它们

Question

我正在尝试将信使功能构建到我正在使用 laravel 5.4 开发的网站中

我有一个 ChatApp.vue 组件，我在messages.blade.php 中调用它。在我的 messagesController 中，我有一个名为 get 的函数，它应该以 response()->json($contacts) 格式为我提供我网站中所有用户的列表。

该功能有效，但是当我将 response()->son($contacts) 返回到我的 messages.blade.php 时，该页面不会加载，而是我只会在浏览器上显示用户数据。

我的 ChatApp.vue：

<template>
    <div class="chat-app">
        <Conversation :contact="selectedContact" :messages="messages"/>
        <ContactsList :contacts="contacts"/>
    </div>
</template>

    import Conversation from './Conversation';

    import ContactsList from './ContactsList';

    export default {
        props: {
            user: {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                selectedContact: null,
                messages: [],
                contacts: []
            };
        },
        mounted() { 
            console.log(this.user);
            axios.get('/messages/messages')
                .then((response) => { 
                console.log(response.data);
                    this.contacts = response.data;
                });
        },
        components: {Conversation, ContactsList}
    }

我的messages.blade 是我调用我的聊天应用程序的地方。

@extends('layouts.layout') 

@section('content')
<div class="container">
    <div class="row justify-content-center">
         <div class="col-sm-12">
            <div class="card">
                <div class="card-header">We Code Messenger</div>

                <div class="card-body" id="app">
                    <chat-app :user="{{ auth()->user() }}"></chat-app>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection    

我的路线：

Route::get('/messages/messages', 'MessagesController@get'); 

我的 MessagesController@get 函数：

 public function get() { 
        $contacts = User::where('id', '!=', auth()->id())->get();        
        return response()->json($contacts);    
    } 

我期望的结果是，当我在浏览器上访问我的messages.blade 时，页面应该加载并且$contacts 应该被发送到我的控制台，但是页面没有加载并且只显示$contacts它。

标签： javascriptnode.jsjsonlaravelvue.js