Vue CLI购物车添加商品无响应问题排查求助

以下是你的代码中导致点击添加按钮无反应的核心问题，以及对应的修复方案：

问题点梳理 #

• 按钮点击未传递商品参数：MostrarProductos.vue中按钮的@click事件没有传入当前循环的item，导致restarProducto方法无法获取要操作的商品信息。
• 属性引用错误：restarProducto方法里用this.stock、this.name是错误的，组件实例本身没有这些属性，应该使用传入的商品对象的对应属性。
• 语法错误：addItem定义后用了逗号而非分号，导致代码执行中断。
• 无效绑定：div上的v:bind="listaPlantas"是错误语法且无意义，应移除。
• 多余props：props中的id未被使用，可删除。
• 逻辑矛盾：restProd方法里给stock加1，和"添加商品到购物车"的逻辑相反，正常应该是库存stock减少、购物车数量qty增加。

修复后的代码 #

App.vue #

<mostrar-productos :listaPlantas="listaPlantas" @restar-products="restProd"></mostrar-productos>

<script>
export default {
    name: 'App',
    data() {
        return {
            listaPlantas: [
                { id: "flor", name: "flores", qty: 0, stock: 5, price: 1000 },
                { id: "cact", name: "cactus", qty: 0, stock: 3, price: 2000 },
                { id: "arbol", name: "árboles", qty: 0, stock: 6, price: 7000 },
            ],
        };
    },
    methods:{
        restProd(addProduct){
            const targetItem = this.listaPlantas.find(item => item.name === addProduct.name);
            if(targetItem && targetItem.stock > 0){
                targetItem.qty += 1; // 购物车选中数量增加
                targetItem.stock -= 1; // 商品库存减少
            }
        }
    }
}
</script>

MostrarProductos.vue #

<div v-for="item in listaPlantas" :key="item.id">
  <ul>
    <li>
      {{ item.name }} - 库存: {{ item.stock }} - 单价: {{ item.price }} - 已选: {{ item.qty }}
      <button @click="restarProducto(item)">Agregar</button>
    </li>
  </ul> 
</div>

<script>
export default {
    emits: ['restar-products'],
    props: {
        listaPlantas: {
            type: Array,
            required: true // 添加强校验，确保props正确传递
        }
    },
    methods:{
        restarProducto(item){
            const addItem = {
                name: item.name, 
                stock: item.stock
            };
            this.$emit("restar-products", addItem);
        }
    }
} 
</script>

额外优化建议 #

• 使用Array.find替代for...of循环，代码更简洁高效。
• 添加props的required校验，避免因未传递props导致的错误。
• 修改库存时增加判断，防止库存变为负数。
• 在模板中显示已选数量qty，让用户直观看到购物车状态。

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