如何动态添加商品到购物车？ (Nuxt 3)

Question

如问题所问，我有 1 个产品列表，每个产品都有一个添加购物车按钮。

点击添加购物车后，标题上的购物车图标会自动显示一个 div，通知用户他们已经添加了产品。

谢谢大家的提问和支持

这是带按钮的产品详细信息页面

<button class="ml-5 btn-wide btn-addcart"><span>Add to cart</span>

<template>
    <div class="product-detail py-[40px]">
        <div class="mx-auto container">
            <div class="head-content">
                <a-breadcrumb separator="»">
                  <a-breadcrumb-item>Trang chủ</a-breadcrumb-item>
                  <a-breadcrumb-item><nuxt-link to="/all-product">RAM ECC</nuxt-link></a-breadcrumb-item>
                  <a-breadcrumb-item href="">RAM Samsung DDR4 ECC Registered 64GB 3200AA</a-breadcrumb-item>
                </a-breadcrumb>
            </div>
            <div class="mt-10 flex justify-start items-start ">
                <div class="border-2 w-[381px] relative ">
                    <img :src="ramImg1" alt="" srcset="" class="top-0 overflow-hidden z-10 left-0">
                </div>
                <div class="px-8 flex flex-col">
                    <div class="flex flex-col pb-3 border-b-2 mb-3 w-full">
                        <span class="text-[15px] text-primary font-semibold"><a href="#">RAM ECC</a></span>
                        <span class=" text-2xl">RAM Samsung DDR4 ECC Registered 64GB 3200AA</span>
                    </div>
                    <span>Mã SP: RA021</span>
                    <span class="text-[#c00] text-2xl font-medium my-3">3,900,000 đ</span>
                    <span class=" text-base text-[#777] mb-5">
                        – Tình trạng: mới 100%, date 2022.<br/>
                        – Giá trên không bao gồm VAT.
                    </span>
                    <span class="text-[#f00] text-xl font-medium mb-5">Còn 8 sản phẩm</span>
                    <span class="mb-5 uppercase text-base font-semibold text-[#114eab]">Bảo hành: 3 năm</span>
                    <div class="flex gap-3 items-center mb-5">
                      <button @click="decrement" class="bg-[#E6E6E6] w-[42px] h-[42px] rounded-full">-</button>
                      <div class="text-center pt-2 bg-[#E6E6E6] w-[42px] h-[42px] ">{{ value }}</div>
                      <button @click="increment" class="bg-[#E6E6E6] w-[42px] h-[42px] rounded-full">+</button>
                      <button class="ml-5 btn-wide btn-addcart"><span>Thêm vào giỏ hàng</span></button>
                      <nuxt-link to="/thanh-toan"><button class="btn-wide btn-primary" ><span>Mua ngay</span></button></nuxt-link>
                    </div>
                    <div class="flex gap-5">
                        <span class="text-[#524e6f] font-medium">Chia sẻ trên:</span>
                        <a href="#" class="text-[#524e6f]"><font-awesome-icon icon="fa-brands fa-facebook-f" style="height: 18px;"/></a>
                    </div>
                </div>
            </div>
            <div class="my-5 flex flex-col">
                <span class="text-primary text-lg font-bold">THÔNG TIN SẢN PHẨM</span>
                <span class=" text-base text-[#777] mt-5 leading-10">
                    – RAM Samsung DDR4 ECC Registered 64GB 3200AA.<br/>
                    – RAM được sản xuất bởi hãng Samsung, mới 100% 1 box 25 cây.
                </span>
            </div>
        </div>
    </div>
</template>

而且选择了更多产品后，我的购物车还没有更新

<template>
    <div class="mini-cart "> 
        <a-dropdown>
          <a class="ant-dropdown-link" @click.prevent>
            <a-badge count="5">
                <div class="bg-white h-[38px] w-[38px] rounded-full">
                    <font-awesome-icon icon="fa-solid fa-cart-shopping" style="color: #0098d9; padding-top: 30%; padding-left: 30%;" />
                </div>
            </a-badge>
          </a>
          <template #overlay>
                <div class="w-[300px] bg-white shadow-lg p-5 flex flex-col ml-[5%] mt-[6%]">
                    <div class="flex justify-start gap-2">
                        <div class="h-[60px] w-[60px]">
                            <img :src="ramImg1" alt="" srcset="">
                        </div>
                        <div class="flex flex-col text-center mb-3 w-[155px]">
                            <span class=" text-primary font-bold">RAM Samsung DDR4 ECC Registered 32GB 3200AA</span>
                            <span class="text-[#414042] text-base">1 x <span class="text-[#c00] text-base font-bold">2,200,000 đ</span></span>
                        </div>
                        <div>
                            <button href="#" class="close"></button>
                        </div>
                    </div>
                    <center><button class="uppercase bg-[#0d6efd1a] py-1 px-[19px] text-primary font-medium rounded-[5px] h-[35px] w-[200px]"><span>xoá tất cả sản phẩm</span></button></center>
                    <div class="flex justify-between text-base text-[#777] font-bold my-3 border-t-[1px] pt-3">
                        <span>Tổng số phụ:</span>
                        <span>2,200,000 đ</span>
                    </div>
                    <nuxt-link to="/gio-hang"><button class="w-full mt-[17px] h-10 border-primary border-[1px] text-primary py-1 rounded-full"><span>Xem giỏ hàng</span></button></nuxt-link>
                    <nuxt-link to="/thanh-toan" class="text-white font-medium"><button class="w-full mt-[10px] h-10 bg-primary rounded-full py-1 text-white"><span>Thanh toán</span></button></nuxt-link>
                </div>
          </template>
        </a-dropdown>
    </div>
</template>