将产品“添加”到购物车中的vue未显示在console.log中

roejwanj 于 2022-11-17 发布在 Vue.js

关注(0)|答案(2)|浏览(113)

代码：shop.vue

<template>
    <div class="shop">
        <div class="products" v-for="Product in items" :key="Product.id" :Product="Product"
            v-on:add-To-Cart="addToCart($event)">
            <h1>{{ Product.name }}</h1> <img :src="Product.pic" width="400" /> <br>
            {{ Product.description }} <br>
            {{ "$" + Product.price }} <br>
            <button class="addToCart" @click="$emit('add-To-Cart', Product)">Add to Cart</button>
        </div>
    </div>
</template>

<script>
    import Product from '../db.json';
    export default {
        name: 'shop',
        data() {
            return {
                items: Product
            }
        },
        methods: {
            addToCart(Product) {
                this.Product=Product
                console.log(this.Product)
            }
        }
    }
</script>

当我单击“添加到购物车”按钮时，它没有将产品记录到控制台
我如何解决这个问题？2并在我网站上实现一个购物车？

vue.js

来源：https://stackoverflow.com/questions/74441162/adding-products-to-cart-in-vue-not-showing-up-in-console-log

2条答案

按热度按时间

gt0wga4j1#

自定义事件是从vue组件发出的，而不是从本机html元素发出的，对于props也是如此，您可以直接从click事件处理程序调用方法addToCart：

<template>
    <div class="shop">
        <div class="products" v-for="Product in items" :key="Product.id" >
            <h1>{{ Product.name }}</h1> <img :src="Product.pic" width="400" /> <br>
            {{ Product.description }} <br>
            {{ "$" + Product.price }} <br>
            <button class="addToCart" @click="addToCart(Product)">Add to Cart</button>
        </div>
    </div>
</template>

<script>
    import Product from '../db.json';
    export default {
        name: 'shop',
        data() {
            return {
                items: Product
            }
        },
        methods: {
            addToCart(Product) {
                this.items.push(Product)
                console.log(this.items)
            }
        }
    }
</script>

赞(0）回复(0）举报 2022-11-17

6ojccjat2#

我对代码做了一点修改，没有应用任何样式。请检查下面的代码片段
第一个

赞(0）回复(0）举报 2022-11-17