TypeError：无法读取 Vue 中未定义的属性“id”

Posted 2023-02-23

【中文标题】TypeError：无法读取 Vue 中未定义的属性“id”

【英文标题】：TypeError :Cannot read property 'id' of undefined in Vue

【发布时间】：2020-03-01 03:58:57

【问题描述】：

我已经为用户配置文件创建了一个组件。 JSON 数据来自Laravel JWT 身份验证。但是得到

TypeError：无法读取未定义的属性“id”。名字也一样

<template>
  <div class="mt-3">
        <div class="alert alert-danger" v-if="has_error">
          <p>Something goes wrong</p>
        </div>
      <p> user.id </p>
      <p> user.name </p>
  </div>
</template>
<script>
  export default 
    data() 
      return 
        has_error: false,
        user:
          id:'',
          name:''
        
      
    ,
    mounted() 
      this.getUsers()
    ,
    methods: 
      getUsers() 
        this.$http(
          url: `auth/profile`,
          method: 'GET'
        )
            .then((res) => 
              this.user = res.data.user
            , () => 
              this.has_error = true
            )
      
    
  
</script>

实际结果必须是： 1 用户名

【问题讨论】：

尝试 console.log(this.user) 以确保它返回 id

res.data.user 是造成麻烦的原因。 console.log(res.data) 并确认您从 API 接收到 user。

谢谢，consol.log(res.data) 提供了一个正确的对象。如何显示这个对象属性？

完成，感谢 Codervine 和 Thomas

【参考方案1】：

因此，您在组件data 中正确定义了用户。只有在res.data.user 未定义的情况下，您得到的错误才可能发生，您从getUsers 方法中的API 获得。 我建议，响应数据中没有 user 对象。通过这种方式res.data.user 是undefined 并且当您将this.user 重新签名为等于res.data.user 它也得到undefined 值。

【参考方案2】：

我们必须使用“this.user = res.data”来代替“this.user = res.data.user”。这解决了这个问题。