laravel中如何将用户数据传入vue答案

【问题标题】：How to pass user data into vue in laravellaravel中如何将用户数据传入vue
【发布时间】：2022-01-16 00:03:35
【问题描述】：

我可以在控制台日志中记录我的用户数据，
如果我尝试在 Contalist 页面上显示数据，它不会返回任何内容。拜托，我是使用 vue 的新手，我只需要将它实施到我的项目中。这是我的 php 控制器和 vue 组件文件，
谢谢。

控制器 php 文件。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use App\Models\PostRequest;
use App\Models\User;

class ChatController extends Controller
{
    public function getMessages(){

        return view('user/message'); //response()->json($contacts);
    }
    public function getContact(){
        $email = Auth::user()->email;
        $contacts = PostRequest::with('user')->where([['email', $email]])->orderBy('id','DESC')->first()->user;
        return response()->json($contacts);
       
    }

}

Vue 聊天组件

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

     <script>
         import Conversation from './Conversation';
         import ContactsList from './ContactsList';

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

Vue ContactlistComponet

    <template>
    <div class="contacts-list">
        <ul>
            <li v-for="contact in contacts" :key="contact.id.user">
            <div class="avatar">
                <img :src="contact.user.reqPhoto" :alt="contact.name.user">
            </div>
            <div class="contact">
                <p class="name">{{contact.user.name}}</p>
                <p class="email">{{contact.user.email}}</p>
            </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: {
        contacts: {
            type: Array,
            default: []
        }
    }
}
</script>

路线

    Route::get('/user/contacts', [ChatController::class, ('getContact')]);

名称匹配我只是在 stackoverflow 中输入错误，我在控制台 app.js:38946 中有错误

[Vue warn]: prop "messages" 的默认值无效：Object/Array 类型的 Props 必须使用工厂函数返回默认值。在 ---> 在 resources/js/components/Conversation.vue 在 resources/js/components/ChatComponent.vue 中找到 _ app.js:38946 [Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性（读取 'id'）”在 ---> 在 resources/js/components/ContactsList.vue 在 resources/js/ 中找到components/ChatComponent.vue app.js:40222 TypeError: Cannot read properties of undefined (reading 'id')

【问题讨论】：

我怀疑它正在返回一些东西，但是因为您没有在 axios 调用中实现 catch ，所以它看起来好像没有返回任何东西。此外，您的操作不需要括号 ( )。
如果你将 Axios 获取的内容记录为response.data，那么值是多少？
axios 正在获取选定的用户数据，我需要登录用户与之聊天，但我无法在页面上显示他的信息@matiaslauriti
@Peppermintology 已经实现了 catch 仍然没有错误
@Barnabaskoloz 你能告诉我们你的数据吗？另外，如果您打开控制台，您是否看到任何 Javascript 错误？看来问题出在Contactlist 组件上。还有一件事，在你的模板上你使用ContactsList，但是在 StackOverflow 上你提到文件是ContactlistComponet，所以它们在定义上匹配吗？

标签： javascript php laravel vue.js eloquent

【解决方案1】：

您需要像这样将:messages 属性传递给<Conversation /> 组件

<Conversation :messages=messages/>

最后，您能否在ul 中检查您正在迭代联系人列表的地方，您收到了什么样的数据。

【讨论】：

在 ul 中仍然接收登录用户和与之聊天的通信，但只能在控制台日志中访问