Vue.js 未设置数据对象数组中声明的属性

Question

我是 vue.js 的新手，我想创建一些产品卡，通过 vue.js 动态设置其属性：

我有这是我的 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'

        }]

但它只是显示卡片，不显示属性（例如产品名称、价格等）。我做错了什么？

Answer 1

命名在开发过程中非常重要，以免被您所写的内容弄糊涂。看看你的代码。尤其是这里<card&nbsp;v-for=&nbsp;"products&nbsp;in&nbsp;product"&nbsp;:productname="product.productname"></card> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;^--&nbsp;wrong&nbsp;naming&nbsp;here您正在访问product.productname但您想访问products.productname.&nbsp;正如我所说，命名很重要。您可以更改产品和产品的命名。