var entriesComponent = Vue.component('entries', {
template: '#entries',
props: {
item: Object,
itemKey: String,
selected: Boolean,
updateSelected: Function,
updateItem: Function,
},
data () {
return {
quantity: 0,
message: '',
}
},
created () {
this.quantity = this.item.quantity
this.message = this.item.message
},
watch: {
quantity () {
this.updateItem(this.itemKey, 'quantity', this.quantity)
},
message () {
this.updateItem(this.itemKey, 'message', this.message)
},
}
});
new Vue({
el: '#app',
data: {
allProducts: {
'foo': { shareSize: 'Small', quantity: '1', itemPrice: '24', message: '' },
'bar': { shareSize: 'Medium', quantity: '1', itemPrice: '35', message: '' },
'baz': { shareSize: 'Large', quantity: '1', itemPrice: '46', message: 'hello' },
'bop': { shareSize: 'Large', quantity: '1', itemPrice: '46', message: '' },
},
items: [ 'foo', 'bar', 'baz' ],
addons: [ 'bop' ],
selected: {},
paymentConfig: {
advance: 25,
firstweek: 25,
ondelivery: 50,
},
weeks: 12,
},
components: {
entriesComponent,
},
created () {
this.setSelectableItems()
},
computed: {
totalAdvance () {
return (this.paymentConfig.advance * this.total) / 100
},
totalFirstWeek () {
return (this.paymentConfig.firstweek * this.total) / 100
},
onDeliveryPayment () {
return (this.paymentConfig.ondelivery * this.total) / (this.weeks * 100)
},
total() {
var sum = 0
Object.keys(this.selected)
.forEach((productKey) => {
if (this.selected[productKey]) {
sum +=
this.weeks *
this.allProducts[productKey].itemPrice *
this.allProducts[productKey].quantity
}
})
return sum
},
},
methods: {
setSelectableItems () {
this.items
.forEach((productKey) => {
Vue.set(this.selected, productKey, false)
})
this.addons
.forEach((productKey) => {
Vue.set(this.selected, productKey, false)
})
},
setSelected (productKey, value) {
this.selected[productKey] = value
},
syncItem (key, field, value) {
this.allProducts[key][field] = value
},
},
});
.row {
background: #f1f1f1;
padding: 25px;
margin-top: 10px;
}
.row:nth-child(even) {
background: #f9f9f9;
}
.item {
background: #dcdcdc;
border: 1px solid #a2a2a2;
padding: 10px;
margin-top: 10px;
}
.item span {
margin-left: 10px;
}
.item input {
display: inline-block;
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<div class="row">
<label class="control-label required">Items</label>
<entries
v-for="productKey in items"
:update-item="syncItem"
:item="allProducts[productKey]"
:item-key="productKey"
:update-selected="setSelected"
:selected="selected[productKey]"></entries>
</div>
<div class="row">
<label class="control-label required">Addons</label>
<entries
v-for="productKey in addons"
:update-item="syncItem"
:item="allProducts[productKey]"
:item-key="productKey"
:update-selected="setSelected"
:selected="selected[productKey]"></entries>
</div>
<div class="row">
<label>Summary</label>
<div class="item" v-for="(value, productKey) in selected" v-if="value">
<span>{{ allProducts[productKey].shareSize }}</span>
<span>
{{ allProducts[productKey].quantity }}
x $
{{ (allProducts[productKey].itemPrice * allProducts[productKey].quantity).toFixed(2)}}
</span>
<span>{{ allProducts[productKey].message }}</span>
</div>
</div>
<div class="row">
<label>Payment plan</label>
<p>{{ '$ ' + totalAdvance.toFixed(2) }} - advance</p>
<p>{{ '$ ' + totalFirstWeek.toFixed(2) }} - first week</p>
<p>{{ '$ ' + onDeliveryPayment.toFixed(2) }}/ week on each of the {{ weeks }} weeks of the subscription</p>
</div>
<div class="row">
<p>
<span>Total</span>
<span>{{ '$ ' + total.toFixed(2) }}</span>
</p>
<p>
<span>Total due now</span>
<span>{{ '$ ' + totalAdvance.toFixed(2) }}</span>
</p>
</div>
</div>
<!-- component template -->
<template id="entries">
<div class="item">
<input
type="checkbox"
v-bind:value="selected"
@change="updateSelected(itemKey, $event.target.checked)">
<span>size: {{item.shareSize}}</span>
<span>price: {{'$ ' + Number(item.itemPrice).toFixed(2) }}</span>
<input type="number" v-model="quantity" />
<input type="text" v-model="message" />
</div>
</template>
