Vue中v-if为何报属性undefined的错

问题描述

例如以下 v-if 会报TypeError: Cannot read properties of undefined (reading 'version')这样的错，即使给 version 设置 null 或 “”，仍还是会报这样的错

<div v-if="dataForm.unknowData.version">
    <!-- 内容 -->
</div>

报错原因

v-if 是一个条件渲染指令，它会根据表达式的布尔值来决定是否渲染对应的 DOM 元素

• 如果表达式是 undefined 或其他 “falsy” 值（如 null、0、“” 等），v-if 会将其视为 false，从而不渲染对应的 DOM 元素
• 但是，如果表达式本身是 undefined，v-if 会尝试读取该值，从而导致错误

v-if 在解析表达式时，会尝试访问dataForm.unknowData.version。如果 dataForm.unknowData 是 undefined 或 null，那么dataForm.unknowData.version会直接导致 TypeError，因为 undefined 和 null 都没有 version 属性。

解决方案

解决方案如下：

1）初始化或其他操作对该数据进行操作时，始终确保dataForm.unknowData是一个对象

2）在 v-if 中使用逻辑运算符来确保dataForm.unknowData是一个对象：

<div v-if="dataForm.unknowData && dataForm.unknowData.version">
</div>

3）使用可选链操作符

在 Vue3 中，可以使用可选链操作符?.来避免错误：

<div v-if="dataForm.unknowData?.version">
</div>

当使用?.时，如果左侧的表达式是 undefined 或 null，操作符会立即返回 undefined，而不会尝试访问右侧的属性，从而避免了错误