Error in render: "TypeError: Cannot read property 'name' of undefined" (Vue)

Question

i just learn about vuejs using state management like vuex.

I got this error

Error in render: "TypeError: Cannot read property 'name' of undefined"

when i populate my data from server like this :

authenticated:{
  created_at:"2019-12-13 16:04:47"
  email:"[email protected]"
  email_verified_at:"2019-12-13 16:04:47"
  employee:{
    accountNumber:null
    address:"JL.VETERAN UTARA LR.124 NO.1"
    baseSalary:"10000000.000000"
    birthDate:"1987-09-14"
    birthPlace:"Ujung Pandang"
    category_id:null
    classification_id:null
    code:"000001"
    created_at:"2019-12-13 16:04:47"
    dateJoin:"2012-01-04"
    dateResign:null
    department_id:null
    division_id:null
    gender:null
    group_id:null
    height:172
    id:1
    idCardNumber:null
    kecamatan:null
    kelurahan:null
  }
  employee_id:1
  id:1
  role:"0"
  updated_at:"2019-12-15 14:22:26"
}

Actually, the data response can display on template, when i try to populate authenticated.employee.name the console show me an error but data can display.

TypeError: Cannot read property 'name' of undefined

Anyone can help me ?

Error

Sorry my english is bad. ^_^

Answer 1

When you display your data try like this:

authenticated.employee && authenticated.employee.name

or

authenticated.employee ? authenticated.employee.name : ''

This is because in moment authenticated.employee is not defined.

With that error will disappear.

You can read more here about that.