vue组合式 商品多规格的编辑

组合式 API 是 Vue 3 新引入的一个 API，它是对 Vue 2.x 中选项式 API 的一种增强和补充，能够更加灵活地组织和复用逻辑代码。

在处理商品多规格的编辑时，可以使用 Vue 3 的组合式 API 来实现。具体步骤如下：

1. 将多规格数据存储在一个响应式的对象中，例如：

const specs = reactive({
  color: ['红色', '蓝色', '绿色'],
  size: ['S', 'M', 'L']
})

2. 使用 computed 计算属性计算出所有规格的组合：

const combinations = computed(() => {
  const keys = Object.keys(specs)
  const result = []

  function combine(prefix, index) {
    if (index >= keys.length) {
      result.push(prefix)
      return
    }

    const key = keys[index]
    const values = specs[key]
    for (let i = 0; i < values.length; i++) {
      combine({...prefix, [key]: values[i]}, index + 1)
    }
  }

  combine({}, 0)

  return result
})

3. 在组件中使用 v-for 循环渲染出所有规格的组合，例如：

<template>
  <div>
    <div v-for="combination in combinations" :key="combination">
      <div v-for="(value, key) in combination" :key="key">
        {{ key }}: {{ value }}
      </div>
    </div>
  </div>
</template>

这样就可以方便地展示和编辑商品多规格信息了。