Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

snips11's avatar

Adding together multiple number inputs using Vue.js

I am looking to add a number of inputs together so far I have reached two results.

Firstly using on input the computed result would add together every digit inputted.

Secondly using v-model as you would with a checkbox to put into an array but all the boxes end up matching each other.

The short piece of code there is is the following:

<template>
                <div class="panel panel-default">
                    <div class="panel-heading">{{credits}}</div>
                      <div v-for="meal in title">
                        <input v-bind:id="meal" v-model.number="used_credits" type="number">{{used_credits}}
                    <div class="panel-body">

                    </div>
                </div>

</template>

An example of the outcome would be for example if there were three number inputs developed by v-for. The user then input 2 in the first and then 2 and 5 in the others. I would like to add the numbers together and output 2, then 4 and then 9 as the user inputs.

0 likes
0 replies

Please or to participate in this conversation.