为啥当代码实际工作时 Vue 会抱怨

Posted 2023-03-14

【中文标题】为啥当代码实际工作时 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": "[e-mail]",
        "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": "[e-mail]",
        "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": "[e-mail]",
        "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>

【问题讨论】：

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

【参考方案1】：

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

 roomdetails && roomdetails.name

或使用v-if：

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