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

【问题标题】：TypeError :Cannot read property 'id' of undefined in VueTypeError：无法读取 Vue 中未定义的属性“id”
【发布时间】：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

标签： laravel vue.js vue-component vuex

【解决方案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”。这解决了这个问题。

【讨论】：