Vue.js 没有设置数据对象数组中声明的属性答案

【问题标题】：Vue.js is not setting attributes declared in data object arrayVue.js 没有设置数据对象数组中声明的属性
【发布时间】：2019-07-24 10:39:44
【问题描述】：

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

这是我的 HTML sn-p:

<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'

        }]

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

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

命名在开发过程中非常重要，不要被你写的东西弄糊涂了。看看你的代码。

尤其是这里

<card v-for= "products in product" :productname="product.productname"></card>
                                                       ^-- wrong naming here

您正在访问product.productname，但您想访问products.productname。正如我所说，命名很重要。您可以更改产品和产品的命名。

【讨论】：

哇...谢谢