javascript - Vue.js : add data when checked box

Question

在下面的 Vue JS 代码中，如果选中该框，我想对输入数据求和。我为每个输入设置了一个 v-model 以将其发布到 API，但我无法弄清楚如果选中了 boxed 则对输入数据求和的方法。 有没有办法在 Vue Js 中做到这一点？

提前致谢

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>

Answer 1

您可以使compated属性返回总和:

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>