Increase or decrease values in an input field using Vue3 when typing

Question

Increase or decrease values in an input field using Vue3 when typing

I am looking to implement a feature where users can input numbers that will be subtracted from a fixed total of 100. However, if the user deletes the input, I want the difference to be added back to the total of 100. Despite my attempts, the subtraction works fine but the addition does not when figures are deleted:

Here is the code snippet I have tried using HTML and JavaScript:

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

javascript vue.js vuejs3 ref

Answer 1

Answer №1

Here is a helpful tip: Utilize @blur() for accurate calculations.

To illustrate the concept, I have provided a code snippet using Vue version 2.

Check out the Live Demo below:

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>

Answer 2

Here is a helpful tip: Utilize @blur() for accurate calculations.

To illustrate the concept, I have provided a code snippet using Vue version 2.

Check out the Live Demo below:

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>

Increase or decrease values in an input field using Vue3 when typing

Answer №1

Similar questions

Binding hover and load events using jQuery on elements that are dynamically generated

The navigation controller, responsible for updating navbar values, is only executed once

The method to permit a single special character to appear multiple times in a regular expression

Manifestation for JSON Firebug extension

The authentication middleware is being executed for all routes within my app.js file, despite my intention to only apply it to a single route

Tips for creating a filter in React JS using checkboxes

Utilize Server Side Includes in your JavaScript code

The parameter 'data' is assumed to have an 'any' type in React hooks, according to ts(7006)

Creating a list of identical elements with shared attribute values using nightwatch.js or JavaScript - a step-by-step guide

Reverting Vue Draggable Components to Their Original Position Upon Dropping Them

Storing an image or video file to the disk of a NodeJS server and creating a reference in MongoDB

The Bootstrap tab feature is malfunctioning when a tab is using data-target instead of href

Ways to refresh the appearance of clothing in Three.js

Issue: Encounter of an unexpected token (Please ensure that plugins are installed to import files that are not JavaScript) while using the rollup vue package

A guide to implementing the map function on Objects in Stencil

How can I modify my code to ensure that trs and th elements are not selected if their display property is set to none?

There seems to be an issue with the transaction payload in the Cardano wallet when submitting an

jquery makes it easy to create interactive hide and show effects

Disabling collapse in Bootstrap 5 is impossible using stopPropagation() when clicking on a particular element

Trouble retrieving desired data from an array of objects in React Native