0

Ao digitar valores no inputs os cálculos são bem diferente, porém ao carregar a aplicação com os valores preenchidos a aplicação roda certinho

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>

Instância 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>

1 Resposta 1

1

Muito provavel que o está acontecendo com você se resume abaixo:

Documentação do vue

Se você quiser que a entrada do usuário seja automaticamente convertida para um número, pode ser feito adicionando o modificador number ao v-model do elemento:

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

Isso é bastante útil, porque mesmo no caso de type="number", o valor retornado pelo HTML é sempre uma String. Se o valor não puder ser convertido através de parseFloat(), o valor original é retornado.

Você pode ver esse efeito com o código abaixo:

<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;
    }
  }
})

A variável reativa input1 sempre terá seu tipo como number mesmo após atualização, e input2 terá seu tipo atualizado para string após atualização.

Por algum mótivo não consegui fazer rodar aqui no snippet.

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .