模板中是否存在相当于“可能未定义”的值？

Question

我的 Vue 组件中的代码依赖于不保证定义的值（但它们稍后会定义）。我想在

<template>

中使用

.value?

条目，类似于我在 JS 中使用的：

<div v-for="n in wantedHours.length - displayedHours?.length" :key="n"></div>

（

wantedHours

始终已定义，

displayedHours

可能未定义）。这不起作用，因为

?

是意外的。

我通过模板解决了这个问题

<div v-for="n in wantedHours.length - nrDisplayedHours" :key="n"></div>

以及脚本部分

const nrDisplayedHours = computed(() => displayedHours.value !== undefined ? displayedHours.value.length : 0)

这工作得很好，但我想确保没有更简单的方法来做到这一点（特别是有一个“可能未定义”的值标志（例如

?

），但另一个解决方案也很棒。

Answer 1

在 JavaScript（和 TypeScript）中，可选链接 (?.) 是一个有用的功能，用于访问嵌套对象属性，而无需显式检查每个引用是否有效。不幸的是，Vue 的模板语法不直接支持可选链。

使用计算属性来处理潜在未定义值的方法在 Vue 中是惯用的。它使您的模板保持干净并允许更好地分离关注点。

但是，如果您想将逻辑保留在模板中，您可以在模板中使用三元条件（内联 if-else）：

<div v-for="n in wantedHours.length - (displayedHours ? displayedHours.length : 0)" :key="n"></div>

这本质上就是您的计算属性正在做的事情，但是内联在模板中。

希望这有帮助！