如何在Vue.js中使用v-if判断MongoDB返回字段是否存在

原有写法的问题 #

• 第一种写法project.endDate != 'undefined'存在类型错误：你将变量和字符串'undefined'做对比，而字段不存在时project.endDate的实际值是undefined原始类型，两者并不相等，因此判断逻辑完全失效。
• 第二种写法project.endDate != null本身可同时过滤undefined和null，但存在两个隐患：一是如果project本身还未加载完成（异步获取MongoDB数据时初始值为空），直接访问project.endDate会触发控制台报错；二是无法区分「字段不存在」和「字段存在但值为null」两种场景，如果你要严格判断字段是否存在，这个写法不符合要求。

正确实现方案 #

场景1：仅判断字段是否存在（无论字段值是什么，哪怕值为null/0/空字符串都算存在） #

使用JS原生的in运算符判断属性是否属于对象：

<div v-if="'endDate' in project" class="badge">Test</div>

场景2：需要字段存在且值不为空（排除null/undefined） #

加可选链避免异步加载阶段的报错：

<div v-if="project?.endDate != null" class="badge">Test</div>

场景3：需要字段存在且值为真值（额外排除空字符串/0/false等假值） #

直接简写即可：

<div v-if="project?.endDate" class="badge">Test</div>

内容的提问来源于stack exchange，提问作者John