Vue单个组件中循环两个不同数组及空值场景的实现咨询

该需求完全可以实现，推荐两种常用实现方案：

前置注意事项 #

你原有代码存在属性取值路径错误，直接运行无法拿到有效值：

• size字段实际路径为：itemMep.orderOperationSkus[0].orderSku.size
• referenceInvoice字段实际路径为：itemVoice.orderOperationSkus[0].orderSku.referenceInvoice
• Vue中使用v-for必须绑定唯一key属性，避免出现渲染异常

方案1：模板分支判断（逻辑直观，适合简单场景） #

通过v-if直接在模板中判断operationInvoice状态，走不同渲染分支：

<!-- operationInvoice不为null时走双层循环逻辑 -->
<template v-if="operationInvoice != null">
  <div v-for="itemMep in operationMep" :key="itemMep.id">
    <my-template 
      v-for="itemVoice in operationInvoice" 
      :key="`${itemMep.id}-${itemVoice.id}`"
      :size="itemMep.orderOperationSkus[0].orderSku.size" 
      :invoice="itemVoice.orderOperationSkus[0].orderSku.referenceInvoice"
    ></my-template>
  </div>
</template>
<!-- operationInvoice为null时仅循环operationMep -->
<template v-else>
  <my-template 
    v-for="itemMep in operationMep" 
    :key="itemMep.id"
    :size="itemMep.orderOperationSkus[0].orderSku.size" 
    :invoice="null" <!-- 此处可替换为你需要的默认值 -->
  ></my-template>
</template>

方案2：计算属性封装逻辑（模板更整洁，适合复杂逻辑场景） #

把判断逻辑抽到JS层的计算属性中，模板仅需做一次循环：
首先定义计算属性：

computed: {
  renderList() {
    // operationInvoice不为空时返回两个数组的组合结果
    if (this.operationInvoice != null) {
      return this.operationMep.flatMap(itemMep => {
        return this.operationInvoice.map(itemVoice => ({
          size: itemMep.orderOperationSkus[0].orderSku.size,
          invoice: itemVoice.orderOperationSkus[0].orderSku.referenceInvoice,
          key: `${itemMep.id}-${itemVoice.id}`
        }))
      })
    }
    // 为空时仅返回operationMep的处理结果
    return this.operationMep.map(itemMep => ({
      size: itemMep.orderOperationSkus[0].orderSku.size,
      invoice: null, // 此处可替换为你需要的默认值
      key: itemMep.id
    }))
  }
}

模板部分直接循环计算属性即可：

<my-template 
  v-for="item in renderList" 
  :key="item.key"
  :size="item.size" 
  :invoice="item.invoice"
></my-template>

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