带有对象的循环数组我们在一个组件中有不同的类型

Question

你好，我不想用我们在一个组件中有不同类型的对象来循环数组

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>

我的问题是我想在一个组件中使用不同类型的对象循环这个数组。请谢谢

Answer 1

你可以试试 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>

带有对象的循环数组我们在一个组件中有不同的类型

loop array with object we have differents type inside one component

javascript

vue.js

nuxt.js