CODEWITHSUNDEEP
javascriptvue.jsvuejs3ref
Deji James
Deji James

Reputation: 437

Add and subtract from input field onkeyup vue3

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

Upvotes: 0

Views: 431

Answers (1)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27222

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>

Upvotes: 1

Related Questions