Question

我正在尝试使用Vue和Pusher在Laravel中进行实时聊天。我已经做完所有事情，但是我不明白为什么我的组件ChatMessages.vue可以显示{{message.user}}，在那里我可以看到用户有一个名字，但是却不能显示{{message.user.name} }。

示例：

{{ message.user }}

这是结果

{{ message.user.name }}

这是结果

这是我的代码：

ChatMessages.vue

<template>
<ul class="chat">
    <li class="left clearfix" v-for="message in messages">
        <div class="chat-body clearfix">
            <div class="header">
                <strong class="primary-font">
                    {{ message.user.email }}
                </strong>
            </div>
            <p>
                {{ message.message }}
            </p>
        </div>
    </li>
</ul>
</template>

<script>
  export default {
    props: ['messages'],

    mounted(){
        console.log(this.messages)
    }
  };
</script>

ChatForm.vue

<template>
<div class="input-group">
    <input id="btn-input" type="text" name="message" class="form-control input-sm" placeholder="Type your message here..." v-model="message.message" @keyup.enter="sendMessage">

    <span class="input-group-btn">
        <button class="btn btn-primary btn-sm" id="btn-chat" @click="sendMessage">
            Send
        </button>
    </span>
</div>
</template>

<script>
export default {
    props: ['user'],

    data() {
        return {
            message:{
                message: ' ',
                user: this.user
            }
        }
    },

    methods: {
        sendMessage() {
            this.$emit('messagesent', this.message)

            this.message = {}
        }
    }    
}
</script>

App.js

Vue.component('chat-messages', 
require('./components/ChatMessages.vue').default);
Vue.component('chat-form', require('./components/ChatForm.vue').default);

const app = new Vue({
el: '#app',

data: {
    messages: []
},

mounted() {
    this.fetchMessages();
    Echo.private('chat')
    .listen('MessageSent', (e) => {
        this.messages.push({
            message: e.message.message,
            user: e.user
        });
    });
},

methods: {
    fetchMessages() {
        axios.get('/chat/messages').then(response => {
            this.messages = response.data;
        })
    },

    addMessage(message) {
        this.messages.push(message);

        axios.post('/chat/messages', message).then(response => {
            //console.log(response.data);
        })
    }
}
});

视图

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">

<title>HelpEachOthers</title>

<!-- Bulma CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" />

<!-- Bootstrap CDN -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
<div class="container" id="app">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Chats</div>

                <div class="panel-body">
                    <chat-messages :messages="messages"></chat-messages>
                </div>
                <div class="panel-footer">
                    <chat-form v-on:messagesent="addMessage" user="{{ Auth::user() }}"></chat-form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ URL::asset('js/app.js') }}"></script>
</body>
</html>

这仅在页面加载后发送的新消息中发生。挂载组件时数据库中的消息将显示正确的名称标签。为了进行测试，我有2个带有2个不同用户的chrome窗口。在发送消息的窗口中，我看不到名称，但在与其他用户的另一个窗口中，我可以实时查看名称，而无需重新加载。

Answer 1

您似乎正在将user属性作为JSON 字符串传递。例如，如果要查看页面源，则会看到类似...

<chat-form ... user="&quot;id&quot;:1,&quot;name&quot;:&quot;Test&quot;,..."

为了使其成为具有可访问属性（例如.name，.email等）的对象，您需要 bind 属性值，例如

<chat-form v-on:messagesent="addMessage" 
           v-bind:user="{{ Auth::user() }}">
</chat-form>

您也可以使用v-bind shorthand syntax，例如

:user="{{ Auth::user() }}"

请参见https://vuejs.org/v2/guide/components-props.html#Passing-Static-or-Dynamic-Props

Answer 2

不确定是否是答案，但我的第一个故障排除建议是检查App.js（已安装方法）中的e.user类型值（例如String或Object）。

无需多说就可以了，但我想值是JSON字符串，而不是JS对象。

如果该值是数据类型字符串，则可以使用JSON.parse（e.user）将其转换为对象

祝你好运！

Vue组件可以加载message.user但不能加载message.user.name

2 个答案: