I am facing an issue with displaying products using the product component.
Initially, in my vue.js application, I retrieve products via ajax as shown below:
var app = new Vue({
el: '#app',
data: {
products: [] // will be fetched through Ajax
},
mounted: function () {
var self = this;
ajaxGetProducts(0, self); // ajax call to fetch products
},
methods: {
getProducts: function (event) {
let groupID = Number(document.getElementById("GroupSelect").value);
ajaxGetProducts(groupID, this);
}
}
});
//Ajax call to retrieve 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 () {
});
}
Afterward, I successfully display those products:
<!-- HTML -->
<div id="app">
<div v-for="prod in products" >{{prod.Id}}</div>
</div>
Question: Now, if I want to incorporate a 'product' component, how can I achieve that? Here's what my current component setup looks like:
Vue.component('product', {
props: [],
template: `<div>ProdID: {{product.Id}} {{product.Qty}}</div>`,
data() {
return {
Id: "test id"
}
}
})
An example Product object includes the following properties:
{
Id: 1,
Qty: 5,
Title: "Nike shoes",
Price: 200,
Color: "Green"
}
Ultimately, I would like to utilize 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 understand that I need to somehow pass the object via component properties. Manually passing each property one by one is not ideal, as the product details might change. Is there a way to pass the entire Product object to the Product component efficiently?