帶有對象的循環數組我們在一個組件內有不同的類型

脾氣暴躁的

你好，我不想用我們在一個組件中具有不同類型的對象循環數組

operations = [
         {
            "id": 15525205,
            "type": "mise_en_prep",
            "referenceMep": "MB0153",
            "tax": 20,
            "size": "M"
          }

         {
            "id": 16525205,
            "type": "invoice",
            "referenceInvoice": "MB0153",
            "tax": 20,
            "size": "M"
          }
]

<div v-for="item in operations">
  <my-component 
    :size="item.size" // if type is mise_en_prep
     :tax="item.tax" // if type is invoice
    :invoice="item.referenceInvoice" // if type is invoice
  </my-component>
</div>

我的問題是我想在一個組件中使用不同類型的對象循環這個數組。求求你了，謝謝你

尼古拉·帕維切維奇

您可以嘗試v-if：

Vue.component('MyComponent', {
  template: `
    <div class="">
      {{ size || tax }}
    </div>
  `,
  props: ['size', 'tax', 'invoice']
})

new Vue({
  el: '#demo',
  data() {
    return {
      operations: [
        {"id": 15525205, "type": "mise_en_prep", "referenceMep": "MB0153", "tax": 20, "size": "M"},
        {"id": 16525205, "type": "invoice", "referenceInvoice": "MB0153", "tax": 20, "size": "M"},
        {"id": 17525205, "type": "invoice", "referenceInvoice": "MB0153", "tax": 20, "size": "M"},
        {"id": 18525205, "type": "mise_en_prep", "referenceInvoice": "MB0153", "tax": 20, "size": "M"}
      ]
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div v-for="(item, i) in operations" :key="i">
    <my-component v-if="item.type === 'mise_en_prep'"
      :size="item.size" 
      :tax="''" 
      :invoice="''">
    </my-component>
    <my-component v-if="item.type === 'invoice'"
      :size="''" 
      :tax="item.tax" 
      :invoice="item.referenceInvoice">
    </my-component>
  </div>
</div>