渲染错误：“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