[Vuejs]-Pass JS object to component Vue.js

4👍

You can pass the information into your component via the props

something like this;

Vue.component('product', {
   props: ['item'],
   template: `<div>ProdID: {{item.Id}} {{item.Qty}}</div>`
})

and pass it on like this;

<div id="app">
   <div v-for="prod in products" :key='prod.Id'>            
       <product :item='prod'></product>
   </div>
</div>
👤keja

1👍

What about passing it as
<product v-for="prod in products" :key="prod.Id" :product="prod"></product> and in the component: props: {product:{type: Object, required: true}}?

Then in the component template you can use things like {{product.Id}}

Leave a comment