[英]Pass JS object to component Vue.js
I am having trouble displaying product via product component. 我无法通过产品组件显示产品。
First in my vue.js app, I load Products via ajax like so: 首先在我的vue.js应用程序中,我通过ajax加载产品,如下所示:
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中使用它:
<!-- 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? 我知道我必须以某种方式通过Component属性传递对象吗? 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.
将每个属性1传递1并不是一个好主意,因为此产品可能会更改,因此属性名称可以更改或添加更多。 I think there should be a way to pass a whole Product object to Product component somehow, right?
我认为应该以某种方式将整个Product对象传递给Product组件,对吗?
You can pass the information into your component via the props
您可以通过
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>
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}}
? 将其作为
<product v-for="prod in products" :key="prod.Id" :product="prod"></product>
以及在组件中<product v-for="prod in products" :key="prod.Id" :product="prod"></product>
: props: {product:{type: Object, required: true}}
?
Then in the component template you can use things like {{product.Id}}
然后,您可以在组件模板中使用
{{product.Id}}
类的东西
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.