vue 实现商品规格选择(sku)

最新推荐文章于 2024-09-07 11:52:22 发布

我是来写bug的吧

最新推荐文章于 2024-09-07 11:52:22 发布

阅读量4.3k

点赞数

分类专栏： VUE 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_55547532/article/details/122105704

版权

本文介绍了如何使用Vue.js实现商品规格选择功能。首先详细讲解了商品数据结构，接着演示如何根据数据结构渲染商品信息到页面。然后讨论了点击规格时在SKU数组中查找库存的方法，当库存为0时，会将相应规格选项设为不可选。在页面加载时也会自动执行此逻辑，确保缺货规格被正确标记。

摘要由CSDN通过智能技术生成

动手之前要先确定自己的商品数据结构，下面是我的商品数据结构

      dataInfo: {
        attr: [
          {
            attr_name: "码数",
            attr_value: [{attr: "40"}, {attr: "50"}],
            attr_values: ["40", "50"],
          },
          {
            attr_name: "颜色",
            attr_value: [{attr: "红色"}, {attr: "蓝色"}],
            attr_values: ["红色", "蓝色"],
          },
        ],
        sku: [
            {
                sku: "40,红色",
                stock: 100,
                price: "4038.08"
            },
            {
                sku: "50,红色",
                stock: 100,
                price: "4038.08"
            },
            {
                sku: "40,蓝色",
                stock: 10