写一个vue and design 商品增加多 SKU

首先，我们需要在商品模型中添加多个 SKU 属性，可以使用数组或对象来存储。然后，在商品增加页面中，我们可以使用 v-for 来循环渲染多个 SKU 的输入框和其他属性。最后，我们需要在提交表单时，将所有 SKU 属性一起提交到后端保存。

下面是一个简单的示例代码：

<template>
  <div>
    <h2>添加商品</h2>
    <form @submit.prevent="submitForm">
      <div v-for="(sku, index) in skus" :key="index">
        <h3>SKU {{ index + 1 }}</h3>
        <label>名称</label>
        <input v-model="sku.name" type="text">
        <label>价格</label>
        <input v-model="sku.price" type="number">
      </div>
      <button type="submit">保存</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      skus: [{ name: '', price: 0 }, { name: '', price: 0 }]
    }
  },
  methods: {
    submitForm() {
      // 提交表单时将所有 SKU 属性提交到后端
      const formData = { skus: this.skus }
      // TODO: 提交表单到后端保存
    }
  }
}
</script>

在这个示例中，我们使用了一个数组 skus 来存储多个 SKU 的属性。在模板中，我们使用 v-for 循环渲染了多个 SKU 的输入框，并通过 v-model 双向绑定了每个 SKU 的名称和价格属性。在提交表单时，我们将所有 SKU 属性放入 formData 对象中一起提交到后端保存。