渲染错误：“TypeError：无法读取未定义的属性‘名称’”(Vue)

Question

我刚刚了解了使用 vuex 之类的状态管理的 vuejs。我收到了这个错误渲染错误：“TypeError：无法读取未定义的属性‘名称’”当我像这样从服务器填充数据时：authenticated:{  created_at:"2019-12-13 16:04:47"  email:"[e-mail]"  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：无法读取未定义的属性“名称”任何人都可以帮助我吗？

Answer 1

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

authenticated.employee && authenticated.employee.name

或者

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

这是因为在 momentauthenticated.employee中没有定义。

随着那个错误将消失。

你可以在这里阅读更多关于它的信息。

Answer 2

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

如果以上都不是问题。就我个人而言，我喜欢使用 _.get() 来处理“路径”中的某些内容可能为空并引发此错误的情况。

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

这样做是在尝试名称之前处理检查员工是否不为空。如果employee 为null，则employeeName 将为null。这意味着您不必像这样链接一堆父检查：

if (response.employee && response.employee.name) {

    let employeeName = response.employee.name;

}

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