一个组件 VueJs 中有两个不同的数组

Question

你好，我不想像这样在一个组件内循环两个不同的数组

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>

这样做是可能的，因为我在这个组件中有 2 个循环，如果操作发票为空，我想添加一个条件，只是循环 operationMep。谢谢

Answer 1

如果我理解正确，如果 operationInvoice 是 null，您希望避免渲染嵌套的 <my-template>。

您可以用 v-if="operationInvoice":

包裹嵌套的 v-for 循环

<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>

一个组件 VueJs 中有两个不同的数组

two differents arrays inside one component VueJs

vue.js

nuxt.js