VueJs v-to check undefined list before continuing

Question

Refer to the template below, how to add a condition to make sure it is menunot undefinedinside an attribute v-for?

I tried v-for="menu?item in menu.items:[]"and v-for="item in menu?.items"but does not work.

<div v-for="item in menu.items">{{item.text}}</div>

Answer 1

Place a div with a directive v-forwithin the scope <template>that checks menufor v-if:

<template v-if="menu">
  <div v-for="item in menu.items">{{ item.text }}</div>
</template>

Thus, the div inside the template will not be displayed if it menudoes not exist.

---

If you really need a check inside the statement v-foras you try, it will look like this:

<div v-for="item in (menu ? menu.items : [])">{{ item.text }}</div>