Tengo un número fijo 100. Cuando un usuario ingresa números, me gustaría que estas cifras se resten del total de 100, pero si se eliminan, la diferencia se vuelve a agregar al total de 100. Esto es lo que he intentado, pero sigue restando sin volver a agregar la diferencia cuando elimino cifras:
html:
<input type="number" placeholder="Ex: 40" v-model="e" @keyup="validate()" @blur="validate()" required />js:
const total = ref(100); const e = ref(""); const validate = (e) => { if(e.value){ totalPercentages.value = total.value - e.value } };Una sugerencia : use @blur() para obtener los cálculos correctos.
Solo para explicar la lógica, creé el siguiente fragmento de código con la versión 2 de Vue.
Demostración en vivo :
new Vue({ el: '#app', data: { e: null, total: 100 }, methods: { validate() { this.total = 100; if (!this.e) return; if (this.e <= this.total) { this.total = this.total - this.e; } } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <input type="number" placeholder="Ex: 40" v-model="e" @blur="validate()" required /> <span>Total : {{ total }}</span> </div>