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

【问题标题】：Vue component can load message.user but not message.user.nameVue 组件可以加载 message.user 但不能加载 message.user.name
【发布时间】：2019-01-01 23:56:11
【问题描述】：

我正在尝试使用 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 窗口。在我发送消息的窗口中，我看不到名称，但在其他用户的另一个窗口中，我可以实时看到名称，无需重新加载。

【问题讨论】：

Auth::user() 返回什么？如果它是某种 JSON 对象，你不应该绑定user 属性属性，即v-bind:user="{{ Auth::user() }}"？
如果我理解你的话，如果我在几个用户之间进行对话，所有消息都将在其会话中使用经过身份验证的用户的名称，而不是消息的作者的名称。我说的对吗？

标签： laravel vue.js

【解决方案1】：

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

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

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

<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

【讨论】：

就是这样，抱歉回复晚了。非常感谢。

【解决方案2】：

不完全确定这是否是答案，但我的第一个故障排除建议是检查 App.js（挂载方法）内的 e.user 类型值（例如字符串或对象）。

如果不启动本地环境很难说，但我认为该值是 JSON 字符串，而不是 JS 对象。

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

祝你好运！

【讨论】：

同样的问题。还是谢谢
有趣。下面的输出是什么样的？ console.log(e, typeof e.user)
{消息：{…}，用户：{…}}“对象”
为了理智，console.log(e.user.name)？
我想我们已经找到了。在 sendMessage (ChatfForm) 中，您将此 this.message 对象重置为 {}。相反，它应该设置为 { message:'', user: this.user }