hello i wan't to loop array with objects we have differents type inside one component
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>
my problem is i want to loop this array with differents types objects in one component. please thank you
You can try with 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>