Question

非常简单的问题。

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

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

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

我知道如何使用js函数来执行此操作，但不确定如何从模板内完成同一件事。

Answer 1

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

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

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

有关Conditional Rendering VueJs的更多信息，请检查文档。

Answer 2

您可以像这样检查：

<template v-if="nodes.length">  // When there are some records available in nodes
  // Iterate it and display the data
</template >
<template v-else>
  // No record found
</template>

Reference

Answer 3

使用类似渲染功能

export default {
  data() {
    return {
      nodes: ['item 1', 'item 2']
    }
  },
  render(h) {
    if (this.nodes.length == 0) {
      return h('p', 'No item')
    } else {
      return h(
        'p',
        {},
        this.nodes.map((item) => h('p', item))
      )
    }
  }
}

Answer 4

您应该使用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模板而不抛出一个例外。打字也少！

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

4 个答案: