Выходные значения из вложенного ответа Api / Laravel Collection в vuejs

Question

Я пытаюсь вывести значения из axios обещания для моего vue компонента. Пока что я все еще получаю ошибку [Vue warn]: Error in render: "TypeError: Cannot read property 'surname' of null". Ниже мой код выглядит так:

<template> 
  <div> 
     {{user.surname}}
  </div>
</template>
<!-- ----------------------------------------------------------------------------------- -->

<script>
   export default {
   name: 'EmployeeCard',

   data(){
     return{
       user: null
     }
   },

   methods:{
     getUser(){
       axios.get('/api/users/'+ this.$route.params.id)
            .then ( response => {
                    this.user = response.data.data; 
             })
     }
  },

  mounted(){
     this.getUser();
  }

  }
</script>

Это фактические данные, возвращенные из api

{
    "data": [
        {
            "data": {
                "id": 11,
                "surname": "Hand",
                "first_name": "Westley",
                "other_name": "Collier",
                "email": "ole48@example.com",
                "phone_number": "306-755-6192 x493",
                "birthday": "06/21/1991",
                "company_id": 3,
                "department_id": 6,
                "job_id": 1,
                "state_id": 11,
                "marital_status": "married",
                "gender_id": 2,
                "photo": null,
                "is_admin": 0,
                "date_of_employment": null,
                "job": {
                    "id": 1,
                    "title": "HR Manager",
                    "comment": null,
                    "created_at": "2019-10-30 17:38:42",
                    "updated_at": "2019-10-30 17:38:42"
                },
                "department": {
                    "id": 6,
                    "name": "Technical",
                    "created_at": "2019-10-30 17:38:43",
                    "updated_at": "2019-10-30 17:38:43"
                },
                "gender": {
                    "id": 2,
                    "name": "Female",
                    "created_at": "2019-10-30 17:38:42",
                    "updated_at": "2019-10-30 17:38:42"
                },
                "company": {
                    "id": 3,
                    "name": "Cometshipping",
                    "created_at": "2019-10-30 17:38:42",
                    "updated_at": "2019-10-30 17:38:42"
                },
                "employmentstatus": {
                    "id": 1,
                    "name": "Full Time Permanent",
                    "comment": null,
                    "created_at": "2019-10-30 17:38:42",
                    "updated_at": "2019-10-30 17:38:42"
                }
            }
        }
    ]
}

Answer 1

<template> 
  <div> 
     {{surname}}
  </div>
</template>
<!-- ----------------------------------------------------------------------------------- -->

<script>
   export default {
   name: 'EmployeeCard',

   data(){
     return{
       user: null
     }
   },

   computed: {
    surname () {
     if (this.user) {
      return this.user.surname
     }
    }

   }

   methods:{
     getUser(){
       axios.get('/api/users/'+ this.$route.params.id)
            .then ( response => {
                    this.user = response.data[0].data; 
             })
     }
  },

  mounted(){
     this.getUser();
  }

  }
</script>

Answer 2

<template> 
  <div> 
      {{ user.surname }}
  </div>
</template>

<script>
    export default {
    name: 'EmployeeCard',

    data(){
        return{
            user: {}
        }
    },

    methods:{
        getUser(){
            axios.get('/api/users/'+ this.$route.params.id)
        .then ( {data} => {
                this.user = data[0].data; 
         })
        }
    },

    mounted(){
        this.getUser();
    }
}
</script>

Answer 3

Ваша пользовательская переменная изначально будет нулевой, и вы не сможете получить свойства из нулевого значения. Следовательно, вы должны заменить {{ user.surname }} на {{ user ? user.surname : '' }}.

Другая проблема заключается в том, что свойство data из вашего ответа является массивом, а не объектом, поэтому в подключенном хуке вы не можете это сделать this.user = response.data.data. Вместо этого вы должны сделать this.user = response.data[0].data.

. Таким образом, пока ваш пользователь не извлечен, вы увидите пустой текст вместо сообщения об ошибке.

Кроме того, я предлагаю вам добавитьcatch зацепка за ваше обещание склониться к любым возможным ошибкам.