How to add an input value to an existing value? Vue

Question

I defined an initial value for each information in the graph, in case A,B and C, wanted to know how to add with a value that will be placed in the input.

Project code:

    <div class="main">
       <chartjs-doughnut v-bind:labels="labels" v-bind:datasets="datasets" v-bind:option="option">
       </chartjs-doughnut>
       <input type="text" id="number1">
       <button @click="soma1()">Colocar</button>
       <input type="text" id="number2">
       <button @click="soma2()">Colocar</button>
       <input type="text" id="number3">
       <button @click="soma3()">Colocar</button>

    </div>
</template>


<script>

    import Motorista from '../services/motoristas'
    import axios from 'axios'

    var A = 5;
    var B = 5;
    var C = 5;

    // function soma1() {
    //     let number1 = document.getElementById("number1").value;
    //     let result = number1 + A.value;
    //     this.A = result;
    // }
    console.log(A)

export default {

    data() {

        return {

            motoristas: [],            

            labels: ["C", "D", "E"],
            datasets: [

                {
                    data: [A, B, C],
                    backgroundColor: ["Red","Yellow","Purple"]
                }
            ],
            option: {
                title: {
                display: true,
                position: 'bottom',
                text: 'Carteira'
                }
            }
        }
    },

    mounted() {
        this.listar()
        this.soma1()
    },
     methods: {
        listar(){

            Motorista.listar().then(resposta => {
            console.log(resposta.data)
            this.motoristas = resposta.data

            this.categoriaC = this.motoristas.filter(m => m.categoria == 3).length;
            this.categoriaD = this.motoristas.filter(m => m.categoria == 4).length;
            this.categoriaE = this.motoristas.filter(m => m.categoria == 5).length;
            })

        },
        soma1(){
            let number1 = document.getElementById("number1").value;
            let result = number1 + A.value;
            this.A = result;
        }
   },

}
</script>

<style scoped>

</style>

Please, when you explain, always use the whole code because I’m starting in Vue.

Answer 1

Nice that you’re learning, then, Vue has in one of its premises the simplification of the Javascript. You can and indeed even "should" declare everything you use within the Vue and not do as you did, declare the variables A,B,C out, this can cause many problems in the code, you tbm do not need to take the values of inputs with javascript, you can declare a v-model making the bidirectional connection (html => script, script => html) of the data, apart from other things you will learn from the practice.

var app = new Vue({
  el: '#app',

  data: {
    A: 5,
    B: 5,
    C: 5,
    valor1: '',
    valor2: '',
    valor3: ''
  },

  methods: {

    soma1: function() {
      alert(Number(this.valor1) + this.A);
      console.log('Valor 1: ', this.valor1);
      console.log('Valor A: ', this.A)
    },
    soma2: function() {
      alert(Number(this.valor2) + this.B);
      console.log('Valor 2: ', this.valor2);
      console.log('Valor B: ', this.B)
    },
    soma3: function() {
      alert(Number(this.valor3) + this.C);
      console.log('Valor 3: ', this.valor3);
      console.log('Valor C: ', this.C)
    },
  }

})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div class="main" id="app">

  <input type="text" v-model="valor1">
  <button @click="soma1">Colocar</button>
  <input type="text" v-model="valor2">
  <button @click="soma2">Colocar</button>
  <input type="text" v-model="valor3">
  <button @click="soma3">Colocar</button>

</div>