VueJs v-for 如何在继续之前检查未定义的列表

Question

参考下面的模板，如何在v-for属性中添加条件来确保menu不是undefined？

我已经尝试了 v-for="menu?item in menu.items:[]" 和 v-for="item in menu?.items" 但都没有用。

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

Answer 1

将 div 与 v-for 指令放在 <template> 中，通过 v-if:

检查 menu

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

这样，如果 menu 不存在，模板中的 div 将不会被渲染。

如果你真的想在 v-for 语句中进行检查，就像你正在尝试的那样，它看起来像这样：

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

VueJs v-for how to check list undefined before continue