In my Vue JS code below i wanted to sum input data if box is checked. I set a v-model for each input to post it to API, but i couldn't figure out the way to sum input data if boxed is checked.
Is there a way to do this in Vue Js?
thanks in advance
export default {
data() {
return {
checkPayment: true,
checkPayment2: true,
}
}<div class="inst-input justify-content-center mt-3">
<input v-model="instFour" class="paid-input" placeholder=" amount-1 " required />
<b-form-checkbox id="checkboxs-2" v-model="checkPayment3" name="checkbox-2" unchecked-value="false">
checked
</b-form-checkbox>
</div>
<div class="inst-input justify-content-center mt-3">
<input v-model="instFive" class="paid-input" placeholder=" amount-2" required />
<b-form-checkbox id="checkbox" v-model="checkPayment4" name="checkbox-1" unchecked-value="false">
checked
</b-form-checkbox>
</div>You can make computed property to return sum :
new Vue({
el: "#demo",
data() {
return {
groups: [{id: 1, input: 0, check: false}, {id: 2, input: 0, check: false},
{id: 3, input: 0, check: false}, {id: 4, input: 0, check: false},
{id: 5, input: 0, check: false}],
}
},
computed: {
getSum() {
return this.calcSum()
}
},
methods: {
calcSum() {
const checked = this.groups.filter(g => g.check === true)
if (checked.length) {
return checked
.map(inp => Number(inp.input))
.reduce((acc, cur) => {
return acc + cur
})
} else {
return 0
}
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<div id="demo">
<div class="inst-input justify-content-center mt-3" v-for="group in groups" :key="group.id">
<input v-model="group.input" class="paid-input" type="number" placeholder=" amount " required />
<b-form-checkbox id="checkboxs" v-model="group.check" name="checkbox" unchecked-value="false" @change="calcSum">
checked
</b-form-checkbox>
</div>
<h3>Sum: {{ getSum }}</h3>
</div>