How to check if list is empty inside a vue.js template?

Question

Pretty simple question.

In my vue.js template I have:

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

I want to return nodes in the list or print "N/A" if the list is empty.

I know how to do this with a js function, but not sure how to accomplish the same thing from within the template.

Answer 1

You should check for both undefined and length using Vue's v-if. If you ever use asyncComputed for example, it will be undefined until the async method resolves. So you are covered for nodes=null, nodes=undefined, and 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>

Or combine them

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

I like using !nodes.length instead of length !== 0 just in case something unexpected besides an array ends up in the data, in which case it will most likely use the empty template and not throw an exception. Less typing too!

Answer 2

You can check like:

<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