two differents arrays inside one component VueJs-CodePudding

Hello i wan't to loop two differents arrays inside one component like this

operationMep= [
         {
            "id": 15525205,
            "type": "mise_en_prep",
            "orderOperationSkus": [
                {
                    "id": 24339529,
                    "orderSku": {
                        "id": 11747818,
                        "referenceMep": "MB0153",
                        "tax": 20,
                        "size": "M"
                     }
                 }
          }
]

operationInvoice= [
         {
            "id": 16525205,
            "type": "invoice",
            "orderOperationSkus": [
                {
                    "id": 24339529,
                    "orderSku": {
                        "id": 11747818,
                        "referenceInvoice": "MB0153"
                     
                     }
                 }
          }
]

<div v-for="itemMep in operationMep">
  <my-template 
    v-for="itemVoice in operationInvoice" 
    :size="itemMep.size" 
    :invoice="itemVoice.referenceInvoice">
  </my-template>
</div>

it's possible to do that because i have 2 loop inside this component and i want to add a condition if operation invoice is null just loop operationMep. thank you

CodePudding user response：

If I understand correctly, you want to avoid rendering the nested <my-template> if operationInvoice is null.

You could wrap the nested v-for loop with v-if="operationInvoice":

<div v-for="itemMep in operationMep">
  <template v-if="operationInvoice">
    <my-template 
      v-for="itemVoice in operationInvoice"
      :size="itemMep.size" 
      :invoice="itemVoice.referenceInvoice">
    </my-template>
  </template>

  <!-- other markup here -->
</div>