javascript - 如何检查 vue.js 模板中的列表是否为空？

Question

很简单的问题。

在我的 vue.js 模板中，我有:

<template v-for="node in nodes">
  [[ node ]]
</template>

如果列表为空，我想返回列表中的节点或打印“N/A”。

我知道如何使用 js 函数执行此操作，但不确定如何从模板中完成相同的操作。

Answer 1

您应该同时检查 undefined和 length使用 Vue's v-if .如果你曾经使用过 asyncComputed例如，它将是 undefined直到异步方法解决。因此，nodes=null 为您提供保障, nodes=undefined , 和 nodes=[] .

<template v-if="!nodes">
  Loading
</template>
<template v-else-if="!nodes.length">
  Empty
</template>
<template v-else v-for="node in nodes">
  {{ node }}
</template>

或者将它们结合起来

<template v-if="!nodes || !nodes.length">
  Nothing To Show
</template>
<template v-else v-for="node in nodes">
  {{ node }}
</template>

我喜欢使用 !nodes.length而不是 length !== 0以防万一除了数组之外的意外结果出现在数据中，在这种情况下，它很可能会使用 empty模板而不抛出异常。打字也少!