En mi código Vue JS a continuación, quería sumar los datos de entrada si la casilla está marcada. Configuré un v-model para cada entrada para publicarlo en la API, pero no pude encontrar la forma de sumar los datos de entrada si el cuadro está marcado. ¿Hay alguna manera de hacer esto en Vue Js?
gracias de antemano
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>Puede hacer que la propiedad computed devuelva la suma:
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>