Pass JS object to component Vue.js

Question

I am having trouble displaying product via product component.

First in my vue.js app, I load Products via ajax like so:

var app = new Vue({
    el: '#app',
    data: {       
        products: [] // will be loaded via Ajax
    },
    mounted: function () {
        var self = this;
        ajaxGetProducts(0, self); // ajax, to fetch products
    },
    methods: {        
        getProducts: function (event) {
            let groupID = Number(document.getElementById("GroupSelect").value);
            ajaxGetProducts(groupID, this);            
        }
    }
});

//Ajax call to fetch Products
function ajaxGetProducts(groupID, self) {
    $.ajax({
        type: "POST",
        url: "/Data/GetProducts",
        data: { Id: groupID },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        dataType: "json"
        , success: function (response) {
            self.products = response; // Loading products into the App instance
        },
        error: function (jqXHR, textStatus, errorThrown) {
            self.products = [];
        }
    }).done(function () {

    });
}

Then I display those produdcts, and it works just fine:

<!-- HTML -->
<div id="app">
    <div v-for="prod in products" >{{prod.Id}}</div>
</div>

Question : if I want to use a component. How do I do that? This is how my component looks so far:

Vue.component('product', {
    props: [],
    template: `<div>ProdID: {{product.Id}} {{product.Qty}}</div>`,
    data() {
        return {
            Id: "test id"
        }
    }
})

Example Product object has following properties:

{
  Id: 1,
  Qty: 5,
  Title: "Nike shoes",
  Price: 200,
  Color: "Green"
}

And eventually I would like to use it in HTML like so:

<!-- HTML -->
<div id="app">
    <!-- need to pass prod object into product component -->
    <div v-for="prod in products" >            
        <product></product>
    </div>
</div>

I know that I have to pass the object via Component properties somehow? Passing each property 1 by 1 is not a good idea, cause this product is subject to change, so property name can change, or be added more. I think there should be a way to pass a whole Product object to Product component somehow, right?

Answer 1

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>

Answer 2

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}}