#javascript #php #laravel #vue.js #v-model
#javascript #php #laravel #vue.js #v-образная модель
Вопрос:
Я пытаюсь создать несколько вариантов ценообразования на основе разных вариантов для моих 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);
},
}
})