Vue v-if多布尔条件判断时目标组件未正常渲染问题咨询

问题成因 #

核心问题出在Pug模板的缩进规则和Vue自定义组件的插槽机制上：

1. 你当前的Pug代码中，SubmittedPendingReupload和SubmittedPending都通过缩进被识别为ReuploadHeader的子元素（也就是默认插槽内容）。如果你的ReuploadHeader组件内部没有显式声明<slot />接收插槽内容，所有写在它标签内的内容都会被直接丢弃，这就是SubmittedPendingReupload符合条件却不渲染的直接原因。
2. 你提到SubmittedPending仍然被渲染，说明你的代码实际缩进存在不一致的问题：大概率是SubmittedPending的缩进和ReuploadHeader同级，只有SubmittedPendingReupload被错误缩进到了ReuploadHeader内部，才会出现符合你描述的渲染结果。
3. 额外注意：你当前两个status === 0的判断是独立的，如果不调整逻辑，后续就算修复了缩进问题，当isReupload为true、status为0时，两个列表组件会同时渲染。

解决方案 #

根据你的业务需求二选一即可：

方案1：三个组件平级渲染（大部分场景的预期逻辑） #

调整Pug缩进，让三个组件处于同一层级，同时调整判断逻辑让两个列表组件互斥：

<template lang="pug">
  ReuploadHeader(v-if="isReupload")
  SubmittedPendingReupload(v-if="status === 0 && isReupload")              
  SubmittedPending(v-if="status === 0 && !isReupload")                  
</template>

方案2：列表组件作为ReuploadHeader的插槽内容 #

如果业务需要把两个列表放在ReuploadHeader内部，只需要在ReuploadHeader组件的模板对应位置添加默认插槽即可：

<!-- ReuploadHeader 组件的模板 -->
<template>
  <div class="reupload-header">
    <!-- 原有组件内容 -->
    <slot /> <!-- 新增这行，接收父组件传入的插槽内容 -->
  </div>
</template>

额外排查点：如果调整缩进后问题仍然存在，可以打印console.log(typeof this.status, typeof this.reupload)确认两个值的类型是否符合预期：status应为数字类型，reupload应为布尔类型，避免因为===严格等于的类型校验导致判断不通过。

内容的提问来源于stack exchange，提问作者Steve