Vue.js input value not reflecting value in component data

Question

I have the following input:

<input :value="inputAmount" @input="handleAmountInput($event)" placeholder="Enter amount..." type="text">

I don't want 2-way binding with inputAmount because I want to clean the input of non-numeric characters in the handleAmountInput() function whenever the user inputs something:

handleAmountInput(e) {
    const cleanInput = e.target.value.replace(/\D/g, '');
    this.inputAmount = cleanInput;
    console.log(cleanInput);
},

The issue is, the input itself doesn't reflect this cleaned up string set to inputAmount. If I show inputAmount in a separate element or console.log it like in the snippet above, it shows up just fine, but binding the value to the input with :value doesn't seem to work and shows the full inputted string, including non-numeric characters. What am I doing wrong here and how do I get the input to show the cleaned up string?

I have a hunch its due to some lifecycle issue. try checking out vuejs.org/v2/guide/reactivity.html#Async-Update-Queue especially the very bottom (next-tick) — VisualBean
– VisualBean, Commented Jul 23, 2021 at 9:21

Michal Levý · Accepted Answer · 2021-07-23 10:41:46Z

4

I'm not yet sure why exactly your code doesn't work as I would expect it to, but the way to fix it is to use both v-model and @input handler at the same time...

const app = Vue.createApp({
  data() {
    return {
      inputAmount: ''
    }
  },
  methods: {
    handleAmountInput(e) {
      this.inputAmount = e.target.value.replace(/\D/g, '');
      console.log(this.inputAmount);
    },
  },
})

app.mount('#app')

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id='app'>
  <input v-model="inputAmount" @input="handleAmountInput($event)" placeholder="Enter amount..." type="text">
  <pre>{{ inputAmount }}</pre>
</div>

Update

Ok, I now understand the reason why your code does not work. What happens:

Value of inputAmount is for example '123' (reflected in <input>)
User types a
Your @input handler is called. It receives the value '123a', do it's job creating cleaned value '123' and assigns it into inputAmount
From Vue POV the value of inputAmount did not changed at all so no re-render is required and <input> still shows '123a' even tho inputAmount has a value of '123'

So another way of fixing your code is just to assign some value <input> can never produce into inputAmount 1st just to trigger the update (demo below)

const app = Vue.createApp({
  data() {
    return {
      inputAmount: ''
    }
  },
  methods: {
    handleAmountInput(e) {
      this.inputAmount = null
      this.inputAmount = e.target.value.replace(/\D/g, '');
      console.log(this.inputAmount);
    },
  },
})

app.mount('#app')

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id='app'>
  <input :value="inputAmount" @input="handleAmountInput($event)" placeholder="Enter amount..." type="text">
  <pre>{{ inputAmount }}</pre>
</div>

edited Jul 23, 2021 at 10:41

answered Jul 23, 2021 at 10:15

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LiteralMetaphore Over a year ago

Oh wow, you're completely right. I totally missed the fact that inputAmount doesn't get mutated at all if the user enters letters. Setting it to null at the beginning of the function does the job perfectly, thank you. Edit: now that I think about it a bit more, I'm still confused as to why inputAmount shows up correctly when called elsewhere in the template, e.g. <p>{{inputAmount}}</p>, but the trick still works so I'll just go with it.

Michal Levý Over a year ago

BTW you can use to limit input to just numbers: <input v-model.number="age" type="number" />

Apurv Bhavsar · Accepted Answer · 2021-07-23 09:34:28Z

0

Have you tried using @change event

<input :value="message" @change="getInput($event)" placeholder="edit me" />

answered Jul 23, 2021 at 9:34

Apurv Bhavsar

6181 gold badge5 silver badges13 bronze badges

Comments

Chetan Kumar Acharya · Accepted Answer · 2021-07-23 10:51:32Z

0

Use computed getter setter instead, Link :

example :

computed: {
    inputAmount: {
        get(){
            //perform your logic
            return 'value'            
        },
        set(newValue){
            this.value= newValue;
        }

    } 
  }

answered Jul 23, 2021 at 10:51

Chetan Kumar Acharya

52 bronze badges

Comments

jeneen · Accepted Answer · 2021-07-26 01:14:02Z

0

use v-model="inputAmount"? please see: https://cn.vuejs.org/v2/guide/forms.html
then you can just edit like this.inputAmount= this.inputAmount.replace(/\D/g, '');

answered Jul 26, 2021 at 1:14

jeneen

1

Comments

Maarten Breddels · Accepted Answer · 2025-02-27 13:07:47Z

While the above solution by Michal Levý works, it results in invalid values when you observe the inputAmount value. For instance when you type 12a, the JS console will print:

inputAmount was 1
inputAmount was 12
inputAmount was 12a
inputAmount was 12

I think a better pattern is to use value, and force the component to rerender using this.$forceUpdate(). In this case, you will see:

inputAmount was 1
inputAmount was 12

Note that SolidJS can also enter this inconsistent state. ReactJS, however, will restore the DOM element to the state of the VDOM and will not become inconsistent.

A better solution I think for VueJS is to always update the DOM element that triggered an event when it did not trigger a re-render so we do

const app = Vue.createApp({
  data() {
    return {
      inputAmount: '12'
    }
  },
  watch: {
    inputAmount(value) {
      console.log('inputAmount was', value);
      // using v-model, this watch would trigger with invalid values
    }
  },
  methods: {
    handleAmountInput(e) {
      this.inputAmount = e.target.value.replace(/\D/g, '');
      console.log(this.inputAmount);
      // if this.inputAmount does not change, vuejs does not rerender
      // so, force it
      this.$forceUpdate()
    },
  },
})

app.mount('#app')

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id='app'>
  <input v-model="inputAmount" @input="handleAmountInput($event)" placeholder="Enter amount..." type="text">
  <pre>{{ inputAmount }}</pre>
</div>

Collectives™ on Stack Overflow

Vue.js input value not reflecting value in component data

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related