Vue js: add data when checked box

user_17895468 0
Viewed 69

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>

vuejs2 vue.js javascript
1 Answers

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>

user_119891890
Related