为什么当代码实际工作时 Vue 会抱怨答案

【问题标题】：why is Vue complaining when code is actually working为什么当代码实际工作时 Vue 会抱怨
【发布时间】：2021-02-25 22:48:38
【问题描述】：

控制台出现Vue错误

 TypeError: Cannot read property 'name' of undefined
    at Proxy.render (app.js:51693)
    at VueComponent.Vue._render (app.js:55951)

我正在创建一个聊天应用程序，我的查询返回有效的 json，当我运行它时，它可以工作，但 Vue 在控制台中抱怨如上。我已经尝试了所有组合来摆脱它。来自 Laravel 的查询返回 this..

[{
    "id": 23,
    "name": "exercitationem",
    "type": "private",
    "created_at": "2020-11-06T22:48:50.000000Z",
    "updated_at": "2020-11-06T22:48:50.000000Z",
    "users": [{
        "id": 1,
        "name": "Hairy Harry",
        "email": "h@123456.com",
        "color": "#FF0000",
        "email_verified_at": null,
        "created_at": "2020-07-08T17:16:03.000000Z",
        "updated_at": "2020-07-08T17:16:03.000000Z",
        "pivot": {
            "room_id": 23,
            "user_id": 1
        }
    }, {
        "id": 4,
        "name": "Skinny Seamus",
        "email": "skinny@skinny123.com",
        "color": null,
        "email_verified_at": null,
        "created_at": "2020-07-22T15:21:19.000000Z",
        "updated_at": "2020-07-22T15:21:19.000000Z",
        "pivot": {
            "room_id": 23,
            "user_id": 4
        }
    }, {
        "id": 5,
        "name": "Art Fartagas",
        "email": "art@kkkkkkkkk.com",
        "color": null,
        "email_verified_at": null,
        "created_at": "2020-08-21T15:13:24.000000Z",
        "updated_at": "2020-08-21T15:13:24.000000Z",
        "pivot": {
            "room_id": 23,
            "user_id": 5
        }
    }]
}]

这个值被传递给selectedroom:[] 它具有与之关联的房间详细信息和用户。当我在像这样{{roomdetails.name}} 的 Vue 模板中运行它时，它什么也不返回，但如果我通过这样的计算运行它

    computed:{
            thisroomdetails(){
              return this.selectedroom[0];
             }

然后运行{{thisroomdetails.name}} 它可以工作，但控制台中的 Vue 抱怨就像这篇文章的开头一样。任何人都知道这里发生了什么。谢谢

好的，我尝试了解决方案 v-if，但仍然抱怨 vue。我对其他查询（例如获取消息等）没有任何问题。这就是我现在得到的。

<template>


 <div class="col">
    <div>

         <div v-if="thisroomdetails" class="roomnamediv"> {{thisroomdetails.name}}</div>
 
         <div
          v-if="thisroomdetails.users"
          v-for="youserx in thisroomdetails.users"
          :class="activeConversation === youserx.id ? 'selectedconv' : 'convusers' "
          >
         {{ youserx.name }}
        </div>

 
    </div>
 </div> 


</template>



 <script>


    

    export default {
    
      props: ['fetchMessages','roomdetails'],

      data() {
        return {
                activeConversation:null
   
                }
       },

       methods:{
         getRelativeMessages(val){
            this.activeConversation=val.id
            return this.fetchMessages(val);

         }

     },

     computed:{
               thisroomdetails(){
                      return this.roomdetails[0];
                }

     }
 }

 </script>

【问题讨论】：

感谢您的帮助。毕竟这确实解决了问题。虽然，我无法弄清楚为什么当我处理消息结果时它不会发生。也许更复杂的查询需要更多时间？

标签： json laravel vue.js

【解决方案1】：

当数据仍然不可用时，这会在初始渲染中发生，因此为避免该警告，请尝试在模板中添加条件渲染：

 {{roomdetails && roomdetails.name}}

或使用v-if：

<div v-if="roomdetails">{{roomdetails.name}}</div>

【讨论】：