I have a fixed number 100. When a user enters in numbers, I'd like these figures to be subtracted from the total of 100 but if deleted, the difference added back to the 100 total. This is what I have tried but it keeps subtracting without adding the difference back when I delete figures:
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
}
};
One suggestion : Use @blur() to get the correct calculations.
Just to explain the logic, I created below code snippet with Vue version 2.
Live Demo :
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>