hola, no quiero hacer un bucle de matriz con objetos que tenemos diferentes tipos dentro de un componente
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>mi problema es que quiero hacer un bucle en esta matriz con diferentes tipos de objetos en un componente. por favor gracias
Puedes probar con 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>