Имеется следующий код, где есть два компонента, пожалуйста подскажите как можно вывести общую сумму из этих двух компонентов при нажатых чекбоксах (данный html нужно, чтобы оставался прежним, он мне нужен будет для верстки:
<div id="app">
SUM: {{ sum }}
<checkbox-counter1></checkbox-counter1>
<checkbox-counter2></checkbox-counter2>
</div>
)
код:
<div id="app">
SUM: {{ sum }}
<checkbox-counter1></checkbox-counter1>
<checkbox-counter2></checkbox-counter2>
</div>
<script>
Vue.component('checkbox-counter1', {
data: function () {
return {
items:[
{ value: [3.99, 1], checked: false },
{ value: [4, 2], checked: false },
{ value: [7, 3], checked: false },
],
checkAll: false,
}
},
computed: {
total() {
const val1 = this.items.reduce((acc, n) => acc + n.value[0] * n.checked, 0);
this.$emit('change', val1);
return val1;
},
day(){
return this.items.reduce((acc, n) => acc + n.value[1] * n.checked, 0);
}
},
watch: {
checkAll(val) {
this.items.forEach(n => n.checked = val);
},
},
template: '<div><input v-for="n in items" v-model="n.checked" type="checkbox"> <div>{{ total }}</div> <div>{{ day }}</div> <div><input type="checkbox" v-model="checkAll"></div></div'
})
Vue.component('checkbox-counter2', {
data: function () {
return {
items:[
{ value: [1, 1], checked: false },
{ value: [1, 1], checked: false },
{ value: [1,1], checked: false },
],
checkAll: false,
}
},
computed: {
total() {
const val2 = this.items.reduce((acc, n) => acc + n.value[0] * n.checked, 0);
this.$emit('change', val2);
return val2;
},
day(){
return this.items.reduce((acc, n) => acc + n.value[1] * n.checked, 0);
}
},
watch: {
checkAll(val) {
this.items.forEach(n => n.checked = val);
},
},
template: '<div><input v-for="n in items" v-model="n.checked" type="checkbox"> <div>{{ total }}</div> <div>{{ day }}</div> <div><input type="checkbox" v-model="checkAll"></div></div'
})
new Vue({
el: '#app',
data: {
},
computed: {
sum() {
}
}
});
