Trying to get a hang of vue.js and looking to create dynamic product cards using it:
This is the snippet from my HTML file:
<div id="app">
<card v-for="products in product" :productname="product.productname"></card>
</div>
Here's the vue.js template/component code I've written:
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 here's the vue instance part:
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'
}]
Although the card layout is displaying, the attributes like product name, price are not showing up. Any idea what could be wrong?