vuejs v-for如何在继续之前检查列表不确定

Question

请参阅下面的模板，如何添加条件以确保menu不是v-for属性中的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>