Question

我已经为用户个人资料创建了一个组件。 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个用户名

Answer 1

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

Answer 2

我们必须替换“ this.user = res.data.user”，而不是“ this.user = res.data.user”。这就解决了这个问题。

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

2 个答案: