Блог

Я пытаюсь создать несколько вариантов ценообразования на основе разных вариантов для моих Laravel и Vue JS. Например, у меня есть 3 варианта РАЗМЕРА, ЦВЕТА и МАТЕРИАЛОВ, и каждый вариант содержит 2 или более вариантов.

РАЗМЕР => Маленький, Большой

ЦВЕТ => Белый, Черный

МАТЕРИАЛЫ => Золото, Серебро

Таким образом, ценообразование опциона будет выглядеть примерно так:

Теперь я хочу получить цены (входные значения) для всех вариантов вариантов с помощью Vue js v-model. Мне также нужен вариант, чтобы я мог отслеживать, какая цена указана за тот или иной вариант. Я попробовал и уже внедрил решение. Но я думаю, что решение, которое я реализовал, не является оптимальным. Так что для меня будет большим подспорьем, если вы посмотрите и предложите мне лучший вариант для достижения моей цели. Заранее благодарю.

Мой фрагмент кода:
https: //jsfiddle.net/Shuvosd/zfnLom2x/63/

СТРУКТУРА 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 amp;amp; 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 amp;amp; 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>
 

КОД CSS

 #app{
    display: flex;
    justify-content: space-evenly;
}


.add-pricing > ul {
  border:1px solid #ddd;
  padding:10px;
  overflow: hidden;
  margin-bottom:0px;
}

ul{
  list-style:none;
}

.add-btn{
  float:right;
  margin-top:5px;
}
.sub_field{
  margin-top: 10px;
}


table{
  display: inline-block;
  margin-top:10px;
}
thead tr td,
thead tr th {
    border: 1px solid #ddd;
    padding: 5px;
}
 

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);
        },

  }
})