I'm new to vue.js and I want to create some product cards that will dynamically set its attributes through vue.js:
I have this is my HTML snippet:
<div id="app">
<card v-for= "products in product" :productname="product.productname"></card>
</div>
This is my vue.js template/componet code:
Vue.component('card', {
props: [`productname`, `oldPrice`, `productPrice`, `productdetails`, `imgsrc`],
template: `
<div class="card">
<div class="card-img-top">
<img :src="imgsrc">
</div>
<div class="card-body">
<h2>{{productname}}</h2>
<p>{{productdetails}}.</p>
<h6 class="product-price"><span class="old-price">{{oldPrice}} </span>{{productPrice}}</h6>
<div class="rating">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star-half"></span>
<span class="fa fa-star-o"></span>
</div>
</div>
</div>`
})
And this is my vue instance:
new Vue({
el: " #app",
data: {
product: [{
imgsrc: 'img/41IP6IopkBL.jpg',
productname: "Pinar Wine top",
productdetails: 'Lorem ipsum dolor sit amet, consectetur ',
productPrice: '$200',
oldPrice: '$400'
}, {
imgsrc: 'img/41IP6IopkBL.jpg',
productname: 'Pinar Wine top',
productdetails: 'Lorem ipsum dolor sit amet, consectetur',
productprice: '$200',
oldprice: '$400'
}]
But it's just displaying the cards, the attributes (eg product name, price etc.) are not displaying. What am I doing wrong?
Naming is really important in development to not get confused by what you've been writing. Take a look at your code.
Especially here
<card v-for= "products in product" :productname="product.productname"></card>
^-- wrong naming here
You are accessing product.productname
but you want to access products.productname
. As I said, naming is important. You might change the naming for product and products.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.