Use Input field as number or %

Hi Team
I have a question learning Vue.js, Is there any way I can have an input v-modal field act as %field or $value field.
For example, someone can enter 1000 or 5% which is based on another field value for example 5% of $100(this is another table data field as {{}}.

Thanks in advance

Bind the Input (1000 or 5%) to a v-model and then use a computed property to calculate the desired value by either returning the 1000 directly or calculating 5% of the other field’s value.

Thanks do we have any example?

Here you go

<template>
  <div class="hello">
    <label for="userinput">the user's input</label>
    <input type="text" v-model="userinput" id="userinput">
    <pre>
      baseamount: {{ baseamount }}
      calculatedvalue: {{ calculatedvalue }}
    </pre>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      baseamount: 100,
      userinput: '',
    }
  },
  computed: {
    calculatedvalue() {
      var re = /(\d+)\s*%/
      var pctvalue = this.userinput.match(re)
      if (pctvalue) {
        return pctvalue[1] / 100 * this.baseamount
      }
      return this.userinput
    }
  }
}
</script>

Of course you have to extend this. For example to allow userinput like 12.5% or even locales with decimal separator other than . (my RegExp does not do this).

Thanks a lot

Hi Mate
Just want to ask you one thing I am having user input field created dynamically from array of object and my property is vbinded with it. The user inputs the number or % in the same input field. Also, some of rows for particular months as per below. How can I make sure if someone enters the qty as 300 or % for product A which gets the values of % from Qty available available which is also a dynamic field from object of arrays . How can I achieve it?

                 Qty  Available   August

Product A 10000 100
Product B 15000 200

Total 300

Seeing your existing code would help here. Maybe you setup some Codepen?

From what I get from your description, it sounds as if the user should rather select a value from a list, than enter a value in a text field. That way it would be easier to assure valid input.