Vue中添加商品到购物车无console.log输出的问题及实现方案

一、修复控制台无输出问题 #

原代码核心错误是误用了组件间通信的$emit机制——在同一个组件内触发自定义事件，又试图在自身元素上监听，完全没必要，直接调用组件内方法即可。具体修复步骤：

1. 移除无效绑定与监听
   删除循环的.products元素上的:Product="Product"和v-on:add-To-Cart="addToCart($event)"，这些是组件间通信的写法，不适合同一组件内的交互。

2. 修改按钮点击逻辑
   将按钮的@click="$emit('add-To-Cart', Product)"改为直接调用组件内的addToCart方法：

<button class="addToCart" @click="addToCart(Product)">Add to Cart</button>

3. 规范数据声明（可选）
   在data中声明Product属性，避免给Vue实例添加非响应式属性：

data() {
    return {
        items: Product,
        Product: null // 声明临时存储选中商品的属性
    }
}

修复后的完整shop.vue代码：

<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,
            Product: null
        }
    },
    methods: {
        addToCart(Product) {
            this.Product = Product
            console.log(this.Product)
        }
    }
}
</script>

此时点击按钮，控制台就能正常输出选中的商品信息。

二、实现完整购物车功能 #

基于修复后的代码，扩展出包含商品数量管理、总价计算、购物车展示的完整功能：

1. 初始化购物车数据 #

在data中添加cart数组，用于存储购物车商品（包含数量信息）：

data() {
    return {
        items: Product,
        cart: [] // 购物车数组，每个元素包含商品信息和count属性
    }
}

2. 完善addToCart方法 #

实现商品重复添加时增加数量，否则新增商品：

methods: {
    addToCart(product) {
        // 查找购物车中是否已有该商品
        const existingItem = this.cart.find(item => item.id === product.id)
        if (existingItem) {
            // 已有则数量+1
            existingItem.count += 1
        } else {
            // 没有则添加新商品，初始数量为1
            this.cart.push({...product, count: 1})
        }
        console.log('当前购物车:', this.cart)
    }
}

3. 添加购物车展示区域 #

在template中添加购物车HTML结构，展示商品列表、数量、总价：

<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 class="cart">
            <h2>购物车</h2>
            <div v-if="cart.length === 0">购物车为空</div>
            <div v-else>
                <div v-for="item in cart" :key="item.id" class="cart-item">
                    <span>{{ item.name }} × {{ item.count }}</span>
                    <span>${{ (item.price * item.count).toFixed(2) }}</span>
                    <button @click="removeFromCart(item.id)">删除</button>
                </div>
                <div class="cart-total">
                    总价: ${{ calculateTotal().toFixed(2) }}
                </div>
            </div>
        </div>
    </div>
</template>

4. 添加辅助方法 #

添加删除商品和计算总价的方法：

methods: {
    addToCart(product) {
        const existingItem = this.cart.find(item => item.id === product.id)
        if (existingItem) {
            existingItem.count += 1
        } else {
            this.cart.push({...product, count: 1})
        }
        console.log('当前购物车:', this.cart)
    },
    // 删除购物车中的商品
    removeFromCart(productId) {
        const index = this.cart.findIndex(item => item.id === productId)
        if (index !== -1) {
            this.cart.splice(index, 1)
        }
    },
    // 计算购物车总价
    calculateTotal() {
        return this.cart.reduce((total, item) => total + (item.price * item.count), 0)
    }
}

5. 基础样式优化（可选） #

添加CSS让布局更清晰：

<style scoped>
.products {
    border: 1px solid #eee;
    padding: 20px;
    margin: 20px 0;
}
.cart {
    margin-top: 40px;
    padding: 20px;
    border: 1px solid #ddd;
}
.cart-item {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    padding: 10px;
    border-bottom: 1px solid #eee;
}
.cart-total {
    text-align: right;
    font-weight: bold;
    margin-top: 20px;
}
</style>

至此，已实现包含商品添加、数量管理、商品删除、总价计算的完整购物车功能。

内容的提问来源于stack exchange，提问作者Xanward