Vue 3 - nested v-if

Question

数组嵌套时如何使用v-if？

我试过

<div v-for="comment in project.comments.project_comments" v-if="project.comments.project_comments" class="card shadow border-start-warning py-2">
<div class="row">
<div class="col"><span>{{comment.comment_body}}</span></div>
</div
<div v-else>
No commnets
</div>

但是我得到错误$data.project.comments是未定义的

我从后端的输出

"comments": {
"id": 2,
"project_comments": [
{
"id": 1,
"comment_body": "Hi comment",
"comment_date_add": "26.08.2022 14:22",
"approved_comment": true
}
],
"project_comments_name": "test1"
},

Answer 1

如果在API调用完成后才分配project.comments.project_comments，则会遇到错误，因为在API调用有机会完成之前，v-if在组件创建时运行。如果您更新您的v-If以使用可选链接，那么如果project.comments.project_comments的任何部分还不存在，v-If将返回false：

v-if="project?.comments?.project_comments"

Answer 2

v-if在循环的每次迭代中都会工作。您需要检查父元素上的project.comments.project_comments。

例如像这个

<template v-if="project.comments.project_comments">
<div v-for="comment in project.comments.project_comments" class="card shadow border-start-warning py-2">
<div class="row">
<div class="col"><span>{{comment.comment_body}}</span></div>
</div
</div>
</template>
<div v-else>
No commnets
</div>