1

Estava a experimentar vuejs e deparei-me com algumas dificuldades, basicamente estava a somar 3 inputs e colocar o resultado em um 4º.

Problema, vamos supor que insiro:

t.valor1 => 1
t.valor1 => 0 ( preciso apagar e colocar o 0 de novo)
t.valor1 => 3

ou

t.valor1 => 0
t.valor1 => 1 ( preciso apagar e colocar o 0 de novo)
t.valor1 => 3

O total é de 13 e não 4, o vuejs esta a tratar os resultados como texto apesar de ter colocado a opção model.number. Eu penso que a causa aqui é da diretiva input-noempty que está a alterar o valor do input diretamente invez do valor do modelo, mas seria o método mais correto?

Vue.directive('input-noempty', {
  update: function(el, binding) {
  	// sem zeros a esquerda
    el.value = el.value.replace(/(^|[^0-9])0+/g, "");
    // evita que o campo fique vazio
    el.value = el.value.length == 0 ? 0 : el.value;
  },
});



new Vue({
  el: "#app",
  data: {   
  	t:{
    	valor1:0, valor2: 0, valor3:0, total: function(){return this.valor1 + this.valor2 + this.valor3;}
    }
  }  
})
.total{ border-color: lightblue; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

<input v-input-noempty  type="test" v-model.number="t.valor1" />
<input v-input-noempty  type="test" v-model.number="t.valor2" />
<input v-input-noempty  type="test" v-model.number="t.valor3" />

<input class="total" type="test" v-model.number="t.total()" />

</div>

1 Resposta 1

2

À partida seria de esperar que o v-model.number só retornasse números, mas não é o caso... há um issue no Github sobre isso onde um dos membros da equipa diz que talvez na V.3 esse novo comportamento seja considerado. Assim isto é um problema clássico de concatenação de strings. Tu pensas que estás a somar números mas estás a concatenar strings. Usa Number() para converter de string para numero e já vai funcionar como esperas.

Deixo um exemplo, ligeiramente modificado como sugestão. Uso computed porque parece-me mais correto aqui.

new Vue({
  el: "#app",
  data: {
    t: {
      valor1: 0,
      valor2: 0,
      valor3: 0,
    }
  },
  computed: {
    total() {
      const {valor1, valor2, valor3} = this.t;
      return [valor1, valor2, valor3]
        .map(Number)
        .reduce((input, sum) => input + sum, 0);
    }
  }
})
.total {
  border-color: lightblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">

  <input v-input-noempty type="test" v-model.number="t.valor1" />
  <input v-input-noempty type="test" v-model.number="t.valor2" />
  <input v-input-noempty type="test" v-model.number="t.valor3" />

  <input class="total" type="test" v-model.number="total" />

</div>

2
  • Por fim consegui arranjar um solução, também fui forcado a usar meunumero || 0 e no meu caso estou usando um componente agora. Depois de ler sobre watchers, diretives, components, ao menos já aprendi algo novo. Mas desmotivou bastante o vuejs, porque tinha uma tabela para construir, e pensei que o vuejs ia-me facilitar a vida e só me atrasou.
    – lazyFox
    Commented 22/01/2019 às 17:28
  • 1
    @lazyFox fiz mais uma melhoria no código se quiseres usar.
    – Sergio
    Commented 22/01/2019 às 17:44

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 .