Question

我只是使用诸如vuex之类的状态管理来了解vuejs。

我收到此错误

渲染错误：“ TypeError：无法读取未定义的属性'name'”

当我像这样从服务器填充数据时：

authenticated:{
  created_at:"2019-12-13 16:04:47"
  email:"super@vetura.id"
  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"
}

实际上，当我尝试填充authenticated.employee.name时，控制台会显示一个错误，但数据可以显示。

TypeError：无法读取未定义的属性“名称”

有人可以帮助我吗？

Error

对不起，我的英语不好。 ^ _ ^

Answer 1

当您显示数据时，请尝试如下操作：

authenticated.employee && authenticated.employee.name

或

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

这是因为暂时未定义authenticated.employee。

该错误将消失。

您可以阅读more here。

Answer 2

在服务器的响应中，雇员可能为空。因为在该用户上没有员工ID或具有该ID的员工不存在。

如果以上都不是问题。我个人喜欢使用_.get（）处理“路径”中某些内容为null并引发此错误的情况。

let employeeName = _.get(response, 'employee.name');

这样做是在尝试输入雇员姓名之前检查雇员是否不为null。如果employee为null，则employeeName将为null。这意味着您不必像这样捆绑一堆父母支票：

if (response.employee && response.employee.name) {
    let employeeName = response.employee.name;
}

https://lodash.com/docs/4.17.15#get

渲染错误：“ TypeError：无法读取未定义的属性'名称'”（Vue）

2 个答案: