Ошибка типа: невозможно прочитать свойство 'id' из неопределенного в Vue

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

Вместо «this.user = res.data.user» мы должны указать «this.user = res.data». И это решило эту проблему.

Answer 2

Итак, вы правильно определили пользователя в компоненте data. И ошибка, которую вы получаете, может произойти только в том случае, если res.data.user не определено, что вы получаете от API в методе getUsers. Я полагаю, что в данных ответа нет объекта user. Таким образом, res.data.user равно undefined, и, если вы изменили значение this.user на res.data.user, оно также получит значение undefined.