Javascript Vue js+；Laravel多重定价期权问题

我正在尝试为我的Laravel和Vue JS创建基于不同变量的多个定价选项。例如，我有3个变量大小、颜色和材质，每个变量包含2个或更多选项

大小 =>小的，大的

颜色 =>白色，黑色

材料 =>金、银

因此，期权的定价将如下所示：

现在，我想获得Vue js v-model的所有变体选项的价格（输入值）。我还想要一个选项，这样我就可以跟踪哪种变体的价格。我已经尝试并实施了一个解决方案。但我认为我实施的解决方案不是最优的。因此，如果你能看一看并向我建议一个更好的选择来实现我的目标，这对我将是一个很大的帮助。提前谢谢

我的代码片段：

HTML结构

<div id="app">
  <!-- start add pricing area -->
  <div class="add-pricing">
    <ul v-for="(pricing, index) in multi_pricing" :key="index">
      <li> 
          <input id="name" type="text" v-model="pricing.value" :placeholder="pricing.placeholder">
          <button @click="remove(index)">x</button>
          <ul class="sub_field" v-for="(data, key) in pricing.sub_field" :key="key">
              <li>
                <input type="text"  v-model="data.value" :placeholder="data.placeholder">
                <button @click="removeSubField(index, key)">x</button>
              </li>
          </ul>
           <button class="add-btn" type="button" @click="addSubField(index)">+ Add Child</button>
      </li>
    </ul>
    <button class="add-btn" type="button" @click="addMultiPricing">+ Add Parent</button>
  </div>
  <!-- start add pricing area -->
  
  <!-- table area start -->
  <table v-if="multi_pricing && multi_pricing[0].value != null">
    <thead>
      <tr>
        <th>
          <input type="checkbox" />
        </th>
        <th v-for="(pricing, key) in multi_pricing" :key="key">{{ pricing.value }}</th>
        <th> Price</th>
      </tr>
      <template v-if="multi_pricing.length==1">
        <tr v-for="(firstVarient, index) in multi_pricing[0].sub_field" :key="index">
          <td>
            <label>
              <input type="checkbox" value="1">
            </label>
          </td>
          <td> {{ firstVarient.value }}</td>
          <td >
            <input type="text" placeholder="$0.00">
          </td>                              
        </tr>
      </template>

      <template v-if="multi_pricing.length==2">
        <template v-for="firstVarient in multi_pricing[0].sub_field">
          <tr v-show="multi_pricing.length==2 && multi_pricing[1].sub_field.length" v-for="(secondVarient, secondIndex) in multi_pricing[1].sub_field" :key="secondIndex">
            <td>
              <label>
                <input type="checkbox" value="1" >
              </label>
            </td>
            <td> {{ firstVarient.value }}</td>
            <td> {{ secondVarient.value }}</td>
            <td>
              <input id="name" type="text" placeholder="$0.00">
            </td>                              
          </tr>
        </template>
      </template>

      <template v-if="multi_pricing.length==3">
        <template v-for="firstVarient in multi_pricing[0].sub_field">
          <template v-for="secondVarient in multi_pricing[1].sub_field">
            <tr v-for="(thirdVarient, index) in multi_pricing[2].sub_field" :key="index">
              <td>
                <label>
                  <input type="checkbox" value="1" >
                </label>
              </td>
              <td> {{ firstVarient.value }}</td>
              <td> {{ secondVarient.value }}</td>
              <td>{{ thirdVarient.value }}</td>
              <td>
                <input type="text" placeholder="$0.00">
              </td>                              
            </tr>
          </template>
        </template>
      </template>

      
    </thead>
  </table>
  <!-- table area end -->
</div>

VUE JS

var app = new Vue({
  el: '#app',
  data: {
      multi_pricing:[
        {
          id:1,
          value: null,
          placeholder: "Varient",
          sub_field: [
            { id:1, placeholder: 'First Option', value: null},
          ]
        }
      ],
  },
  
  methods:{ 
        addMultiPricing(){
            this.multi_pricing.push({
                id: this.multi_pricing.length ==0 ? 1 : this.multi_pricing[this.multi_pricing.length-1].id+1,
                placeholder: "Varient",
                value: null,
                sub_field: [
                    { id:1, placeholder: 'First Option', value: null}
                ]
            });
        },
        
        remove(index) {
            this.multi_pricing.splice(index, 1);
        },
        
        addSubField(index) {
            this.multi_pricing[index].sub_field.push({
                id:1, 
                placeholder: 'Option', 
                value: null
            });
        },
        
        removeSubField(index, key) {
            this.multi_pricing[index].sub_field.splice(key, 1);
        },

  }
})

var app = new Vue({
  el: '#app',
  data: {
      multi_pricing:[
        {
          id:1,
          value: null,
          placeholder: "Varient",
          sub_field: [
            { id:1, placeholder: 'First Option', value: null},
          ]
        }
      ],
  },
  
  methods:{ 
        addMultiPricing(){
            this.multi_pricing.push({
                id: this.multi_pricing.length ==0 ? 1 : this.multi_pricing[this.multi_pricing.length-1].id+1,
                placeholder: "Varient",
                value: null,
                sub_field: [
                    { id:1, placeholder: 'First Option', value: null}
                ]
            });
        },
        
        remove(index) {
            this.multi_pricing.splice(index, 1);
        },
        
        addSubField(index) {
            this.multi_pricing[index].sub_field.push({
                id:1, 
                placeholder: 'Option', 
                value: null
            });
        },
        
        removeSubField(index, key) {
            this.multi_pricing[index].sub_field.splice(key, 1);
        },

  }
})