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>