实现前端sku选择器?

我自己写的小程序版本有bug,代码片段 https://developers.weixin.qq....
bug:选择第二个属性的时候,同属性的其他属性值不能选择了。

哪位大神能提供vue版本或者小程序版本都可以,谢谢!
源数据:

[
  {
    "skuId": "15274518129967129",
    "commodityId": "15274517970583554",
    "skuDesc": {
      "品牌": "三星",
      "颜色": "黑色",
      "尺寸": "27寸"
    },
    "image": "https://download.xiushewang.com/Fg7L6I5FgCepCyHImZaZfPHQj2fe",
    "itemNumber": "",
    "stockNumber": 0,
    "price": 1888,
    "originalPrice": 2351,
    "salesVolume": 0,
    "skuStatus": true
  },
  {
    "skuId": "15274518129967128",
    "commodityId": "15274517970583554",
    "skuDesc": {
      "品牌": "三星",
      "颜色": "黄色",
      "尺寸": "27寸"
    },
    "image": "https://download.xiushewang.com/FiAqh1EQL-TyMFEOMl7hmNhnVrYq",
    "itemNumber": "",
    "stockNumber": 21,
    "price": 1888,
    "originalPrice": 2351,
    "salesVolume": 0,
    "skuStatus": false
  },
  {
    "skuId": "15274518129967127",
    "commodityId": "15274517970583554",
    "skuDesc": {
      "品牌": "三星",
      "颜色": "红色",
      "尺寸": "27寸"
    },
    "image": "https://download.xiushewang.com/Fm2IFXkEhA2RldgUfFJRhKXPv2tV",
    "itemNumber": "",
    "stockNumber": 0,
    "price": 1888,
    "originalPrice": 2351,
    "salesVolume": 0,
    "skuStatus": true
  },
  {
    "skuId": "15274518129967126",
    "commodityId": "15274517970583554",
    "skuDesc": {
      "品牌": "三星",
      "颜色": "黑色",
      "尺寸": "24寸"
    },
    "image": "https://download.xiushewang.com/Fg7L6I5FgCepCyHImZaZfPHQj2fe",
    "itemNumber": "",
    "stockNumber": 0,
    "price": 1888,
    "originalPrice": 2351,
    "salesVolume": 0,
    "skuStatus": true
  },
  {
    "skuId": "15274518129967125",
    "commodityId": "15274517970583554",
    "skuDesc": {
      "品牌": "三星",
      "颜色": "黄色",
      "尺寸": "24寸"
    },
    "image": "https://download.xiushewang.com/FiAqh1EQL-TyMFEOMl7hmNhnVrYq",
    "itemNumber": "",
    "stockNumber": 21,
    "price": 1888,
    "originalPrice": 2351,
    "salesVolume": 0,
    "skuStatus": true
  },
  {
    "skuId": "15274518129967124",
    "commodityId": "15274517970583554",
    "skuDesc": {
      "品牌": "三星",
      "颜色": "红色",
      "尺寸": "24寸"
    },
    "image": "https://download.xiushewang.com/Fm2IFXkEhA2RldgUfFJRhKXPv2tV",
    "itemNumber": "",
    "stockNumber": 21,
    "price": 1883,
    "originalPrice": 2351,
    "salesVolume": 0,
    "skuStatus": true
  },
  {
    "skuId": "15274518129967123",
    "commodityId": "15274517970583554",
    "skuDesc": {
      "品牌": "三星",
      "颜色": "黑色",
      "尺寸": "21寸"
    },
    "image": "https://download.xiushewang.com/Fg7L6I5FgCepCyHImZaZfPHQj2fe",
    "itemNumber": "",
    "stockNumber": 21,
    "price": 1888,
    "originalPrice": 1999,
    "salesVolume": 0,
    "skuStatus": true
  },
  {
    "skuId": "15274518129967122",
    "commodityId": "15274517970583554",
    "skuDesc": {
      "品牌": "三星",
      "颜色": "黄色",
      "尺寸": "21寸"
    },
    "image": "https://download.xiushewang.com/FiAqh1EQL-TyMFEOMl7hmNhnVrYq",
    "itemNumber": "",
    "stockNumber": 21,
    "price": 1888,
    "originalPrice": 2010,
    "salesVolume": 0,
    "skuStatus": true
  },
  {
    "skuId": "15274518129967121",
    "commodityId": "15274517970583554",
    "skuDesc": {
      "品牌": "三星",
      "颜色": "红色",
      "尺寸": "21寸"
    },
    "image": "https://download.xiushewang.com/Fm2IFXkEhA2RldgUfFJRhKXPv2tV",
    "itemNumber": "",
    "stockNumber": 21,
    "price": 1888,
    "originalPrice": 1995,
    "salesVolume": 0,
    "skuStatus": true
  },
  {
    "skuId": "15274518129967120",
    "commodityId": "15274517970583554",
    "skuDesc": {
      "品牌": "三星",
      "颜色": "黑色",
      "尺寸": "19存"
    },
    "image": "https://download.xiushewang.com/Fg7L6I5FgCepCyHImZaZfPHQj2fe",
    "itemNumber": "",
    "stockNumber": 21,
    "price": 1888,
    "originalPrice": 1999,
    "salesVolume": 0,
    "skuStatus": true
  },
  {
    "skuId": "15274518129967119",
    "commodityId": "15274517970583554",
    "skuDesc": {
      "品牌": "三星",
      "颜色": "黄色",
      "尺寸": "19存"
    },
    "image": "https://download.xiushewang.com/FiAqh1EQL-TyMFEOMl7hmNhnVrYq",
    "itemNumber": "",
    "stockNumber": 21,
    "price": 1888,
    "originalPrice": 1999,
    "salesVolume": 0,
    "skuStatus": true
  },
  {
    "skuId": "15274518129967118",
    "commodityId": "15274517970583554",
    "skuDesc": {
      "品牌": "三星",
      "颜色": "红色",
      "尺寸": "19存"
    },
    "image": "https://download.xiushewang.com/Fm2IFXkEhA2RldgUfFJRhKXPv2tV",
    "itemNumber": "",
    "stockNumber": 21,
    "price": 1888,
    "originalPrice": 1999,
    "salesVolume": 0,
    "skuStatus": true
  },
  {
    "skuId": "15274518129967117",
    "commodityId": "15274517970583554",
    "skuDesc": {
      "品牌": "AOC",
      "颜色": "黑色",
      "尺寸": "27寸"
    },
    "image": "https://download.xiushewang.com/Fg7L6I5FgCepCyHImZaZfPHQj2fe",
    "itemNumber": "",
    "stockNumber": 21,
    "price": 1888,
    "originalPrice": 1999,
    "salesVolume": 0,
    "skuStatus": true
  },
  {
    "skuId": "15274518129967116",
    "commodityId": "15274517970583554",
    "skuDesc": {
      "品牌": "AOC",
      "颜色": "黄色",
      "尺寸": "27寸"
    },
    "image": "https://download.xiushewang.com/FiAqh1EQL-TyMFEOMl7hmNhnVrYq",
    "itemNumber": "",
    "stockNumber": 21,
    "price": 1879,
    "originalPrice": 1999,
    "salesVolume": 0,
    "skuStatus": true
  },
  {
    "skuId": "15274518129967115",
    "commodityId": "15274517970583554",
    "skuDesc": {
      "品牌": "AOC",
      "颜色": "红色",
      "尺寸": "27寸"
    },
    "image": "https://download.xiushewang.com/Fm2IFXkEhA2RldgUfFJRhKXPv2tV",
    "itemNumber": "",
    "stockNumber": 21,
    "price": 1876,
    "originalPrice": 1999,
    "salesVolume": 0,
    "skuStatus": true
  },
  {
    "skuId": "15274518129967114",
    "commodityId": "15274517970583554",
    "skuDesc": {
      "品牌": "AOC",
      "颜色": "黑色",
      "尺寸": "24寸"
    },
    "image": "https://download.xiushewang.com/Fg7L6I5FgCepCyHImZaZfPHQj2fe",
    "itemNumber": "",
    "stockNumber": 21,
    "price": 1888,
    "originalPrice": 1999,
    "salesVolume": 0,
    "skuStatus": true
  },
  {
    "skuId": "15274518129967113",
    "commodityId": "15274517970583554",
    "skuDesc": {
      "品牌": "AOC",
      "颜色": "黄色",
      "尺寸": "24寸"
    },
    "image": "https://download.xiushewang.com/FiAqh1EQL-TyMFEOMl7hmNhnVrYq",
    "itemNumber": "",
    "stockNumber": 21,
    "price": 1888,
    "originalPrice": 1995,
    "salesVolume": 0,
    "skuStatus": true
  },
  {
    "skuId": "15274518129967112",
    "commodityId": "15274517970583554",
    "skuDesc": {
      "品牌": "AOC",
      "颜色": "红色",
      "尺寸": "24寸"
    },
    "image": "https://download.xiushewang.com/Fm2IFXkEhA2RldgUfFJRhKXPv2tV",
    "itemNumber": "",
    "stockNumber": 21,
    "price": 1888,
    "originalPrice": 1999,
    "salesVolume": 0,
    "skuStatus": true
  },
  {
    "skuId": "15274518129967111",
    "commodityId": "15274517970583554",
    "skuDesc": {
      "品牌": "AOC",
      "颜色": "黑色",
      "尺寸": "21寸"
    },
    "image": "https://download.xiushewang.com/Fg7L6I5FgCepCyHImZaZfPHQj2fe",
    "itemNumber": "",
    "stockNumber": 21,
    "price": 1888,
    "originalPrice": 1999,
    "salesVolume": 0,
    "skuStatus": true
  },
  {
    "skuId": "15274518129967110",
    "commodityId": "15274517970583554",
    "skuDesc": {
      "品牌": "AOC",
      "颜色": "黄色",
      "尺寸": "21寸"
    },
    "image": "https://download.xiushewang.com/FiAqh1EQL-TyMFEOMl7hmNhnVrYq",
    "itemNumber": "",
    "stockNumber": 21,
    "price": 1888,
    "originalPrice": 1996,
    "salesVolume": 0,
    "skuStatus": true
  },
  {
    "skuId": "15274518129967109",
    "commodityId": "15274517970583554",
    "skuDesc": {
      "品牌": "AOC",
      "颜色": "红色",
      "尺寸": "21寸"
    },
    "image": "https://download.xiushewang.com/Fm2IFXkEhA2RldgUfFJRhKXPv2tV",
    "itemNumber": "",
    "stockNumber": 21,
    "price": 1888,
    "originalPrice": 1997,
    "salesVolume": 0,
    "skuStatus": true
  },
  {
    "skuId": "15274518129967108",
    "commodityId": "15274517970583554",
    "skuDesc": {
      "品牌": "AOC",
      "颜色": "黑色",
      "尺寸": "19存"
    },
    "image": "https://download.xiushewang.com/Fg7L6I5FgCepCyHImZaZfPHQj2fe",
    "itemNumber": "",
    "stockNumber": 21,
    "price": 1888,
    "originalPrice": 1999,
    "salesVolume": 0,
    "skuStatus": true
  },
  {
    "skuId": "15274518129967107",
    "commodityId": "15274517970583554",
    "skuDesc": {
      "品牌": "AOC",
      "颜色": "黄色",
      "尺寸": "19存"
    },
    "image": "https://download.xiushewang.com/FiAqh1EQL-TyMFEOMl7hmNhnVrYq",
    "itemNumber": "",
    "stockNumber": 21,
    "price": 1888,
    "originalPrice": 1999,
    "salesVolume": 0,
    "skuStatus": true
  },
  {
    "skuId": "15274518129967106",
    "commodityId": "15274517970583554",
    "skuDesc": {
      "品牌": "AOC",
      "颜色": "红色",
      "尺寸": "19存"
    },
    "image": "https://download.xiushewang.com/Fm2IFXkEhA2RldgUfFJRhKXPv2tV",
    "itemNumber": "",
    "stockNumber": 21,
    "price": 1888,
    "originalPrice": 1999,
    "salesVolume": 0,
    "skuStatus": true
  }
]

效果截图

clipboard.png

阅读 2.6k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题