Error typing numeric values in input

Question

When entering values in inputs the calculations are quite different, but when loading the application with the values filled the application wheel

template

    <div id="simulador">
        <div class="container">
            <h1 class="text-center">{{title}}</h1>
            <br>
            <div class="row">
                <form class="form-inline">

                    <div class="form-group mb-6">

                        <input type="text" class="form-control" name="valor" v-model:value="valor" placeholder="Digite o Valor">

                    </div>
                    <div class="form-group  mb-6">

                        <input type="number" class="form-control" name="parcela" v-model:value="parcelas" placeholder="Digite as Parcelas">
                    </div>
                    <button type="submit" class="btn btn-primary" v-on:click.prevent="calculo()">Simular</button>
                </form>

                <br>
                <br>
                <br>
                <br>
                <table class="table table-bordered">

                    <thead>

                        <th>Parcela</th>
                        <th>Valor</th>
                        <th>Rendimento</th>
                    </thead>

                    <tbody>

                        <tr v-for="result in resultado">
                            <td>{{result.parcela}}</td>
                            <td>{{(result.valor)}}</td>
                            <td>{{(result.total)}}</td>

                        </tr>


                    </tbody>

                </table>
            </div>
        </div>
    </div>

Instance Vue

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

<script>
    new Vue({
        el: '#simulador',
        data: {
            title: 'Simulador de Rendimentos',
            juros: 0.041,
            valor: 100,
            parcelas: 12,
            resultado: [],
            executado: false
        },
        methods: {

            calculo() {

                    this.resultado = []

                    if (this.parcelas > 1) {
                        this.resultado.push({
                            'parcela': 1,
                            'valor': this.valor,
                            'total': (this.valor * this.juros) + this.valor

                        })
                        var total_anterior = this.resultado[0].total

                        for (var index = 1; index < this.parcelas; index++) {

                            this.resultado.push({
                                'parcela': index + 1,
                                'valor': this.resultado[index - 1].total,
                                'total': (this.resultado[index - 1].total * this.juros) + this.resultado[
                                    index - 1].total

                            })
                            total_anterior = this.resultado.total
                        }


                    }


                },
                formataDinheiro(n) {
                    return "R$ " + n.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+\,)/g, "$1.");
                },
                formatPrice(value) {
                    let val = (value / 1).toFixed(2).replace('.', ',')
                    return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
                }
        }
    })
</script>

Answer 1

Very likely what’s happening to you boils down to below:

Documentation of the Vue

If you want the user input to be automatically converted to a number, it can be done by adding the number modifier to the v-model of the element:

<input v-model.number="age" type="number">

This is quite useful, because even in the case of type="number", the value returned by HTML is always a String. If the value cannot be converted by parseFloat(), the original value is returned.

You can see this effect with the code below:

<div id='app'>
  <input v-model.number='input1' />
  <input v-model='input2' />
  {{ tipo (input1) }}
  {{ tipo (input2) }}
</div>

new Vue ({
  el: '#app',
  data: {
    input1: 10,
    input2: 15
  },
  methods: {
    tipo (value) {
      return typeof value;
    }
  }
})

The reactive variable input1 will always have your type as number even after updating, and input2 will have its type updated to string after update.

By some mobile I could not make run here in the snippet.