如何检查 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并且不会抛出异常。打字也少了！

Answer 2

要检查列表是否为空，您只需要使用v-if，这样您的模板将如下所示：

<template v-if="nodes.length === 0">
  N/A
</template>

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

有关条件渲染 VueJ 的更多信息，请查看文档。