我是 vue.js 的新手，我想創(chuàng)建一些產(chǎn)品卡，通過 vue.js 動態(tài)設(shè)置其屬性：我有這是我的 HTML 片段：<div id="app"><card v-for= "products in product" :productname="product.productname"></card></div>這是我的 vue.js 模板/組件代碼：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>`})這是我的 vue 實例：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'        }]但它只是顯示卡片，不顯示屬性（例如產(chǎn)品名稱、價格等）。我做錯了什么？