Vue.js 报错 'Cannot read properties of undefined (reading 'name')' 解决方法

在 Vue.js 模板中，您可能会遇到 'Cannot read properties of undefined (reading 'name')' 错误。这个错误通常发生在您尝试访问一个未定义的对象属性时。

错误原因：

这个错误通常是由于您尝试访问一个不存在的对象属性引起的。例如，在您的代码中，form.acTaxPiPersonVo 可能尚未定义或为 null，因此无法访问其 name 属性。

解决方法：

您可以使用 v-if 指令来检查嵌套对象是否存在，从而避免在未定义的对象上访问属性。

示例代码：

<el-form ref="form" :model="form" :rules="rules" label-width="80px">
  <el-form-item v-if="form.acTaxPiPersonVo" label="姓名" prop="acTaxPiPersonVo.name">
    <el-input v-model="form.acTaxPiPersonVo.name" placeholder="请输入收入" />
  </el-form-item>
</el-form>

解释：

v-if="form.acTaxPiPersonVo"：该指令用于检查 form.acTaxPiPersonVo 是否存在。如果存在，则渲染 el-form-item 元素。
prop="acTaxPiPersonVo.name"：该属性用于绑定表单校验规则。

其他解决方法：

除了使用 v-if 指令，您还可以使用以下方法来避免错误：

使用可选链运算符（?.）：可选链运算符允许您安全地访问嵌套对象属性，即使对象不存在或为 null。例如：form.acTaxPiPersonVo?.name
使用三元运算符：三元运算符可以根据条件渲染不同的内容。例如：form.acTaxPiPersonVo ? form.acTaxPiPersonVo.name : ''

结论：

通过使用 v-if 指令或其他安全访问方法，您可以有效地避免 'Cannot read properties of undefined (reading 'name')' 错误，并确保您的代码安全可靠地运行。

Vue.js 报错 'Cannot read properties of undefined (reading 'name')' 解决方法