I am trying to build an only numeric field with VueJS. It kind of works but something is wrong:

1. PASS: Enter 12 in the text field, the value in VueJS is 12, the visual is 12.
2. FAILS: Enter 12a in the text field, the value in VueJS is 12, the visual is 12a. (expected behaviour is 12 in the text field)
3. PASS: Enter 12a4 in the text field, the value in VueJS is 12a4, the visual is 124

You can try with this JSFiddle I made: /

Here is my text field ponent:

const TextField = {
    template: '<div><input type="text" v-model="copy"></div>',
        props: ['value'],
        data () {
        return {
            copy: null
        }
    },
    created () {
        this.copy = this.value.toString()
    },
    watch: {
        value () {
            this.copy = this.value.toString()
        },
        copy () {
            this.$emit('input', this.copy)
        }
    }
}

Here is the code that should allow me to use that text field ponent as an only numeric text:

new Vue({
    el: '#app',
    data: {
        number: 1
    },
    methods: {
        update (value) {
            this.number = parseInt(value.replace(/\D/g, ''))
        }
    },
    ponents: {
        TextField
    }
})

The problem is that the input field does not update when the last entered char is a non numeric value. You have to enter an other numeric value in order to update the input and remove the non numeric chars.

I am trying to build an only numeric field with VueJS. It kind of works but something is wrong:

1. PASS: Enter 12 in the text field, the value in VueJS is 12, the visual is 12.
2. FAILS: Enter 12a in the text field, the value in VueJS is 12, the visual is 12a. (expected behaviour is 12 in the text field)
3. PASS: Enter 12a4 in the text field, the value in VueJS is 12a4, the visual is 124

You can try with this JSFiddle I made: https://jsfiddle/El_Matella/rr2qex8k/

Here is my text field ponent:

const TextField = {
    template: '<div><input type="text" v-model="copy"></div>',
        props: ['value'],
        data () {
        return {
            copy: null
        }
    },
    created () {
        this.copy = this.value.toString()
    },
    watch: {
        value () {
            this.copy = this.value.toString()
        },
        copy () {
            this.$emit('input', this.copy)
        }
    }
}

Here is the code that should allow me to use that text field ponent as an only numeric text:

new Vue({
    el: '#app',
    data: {
        number: 1
    },
    methods: {
        update (value) {
            this.number = parseInt(value.replace(/\D/g, ''))
        }
    },
    ponents: {
        TextField
    }
})

The problem is that the input field does not update when the last entered char is a non numeric value. You have to enter an other numeric value in order to update the input and remove the non numeric chars.

• javascript
• vue.js

• Hi, maybe using type="number" and removing the string transformations this.copy = this.value.toString() in created and watch will help? – Nora Commented Mar 6, 2018 at 14:43
• It does indeed, however I would have prefer not to have the little arrows at the end of the input: jsfiddle/El_Matella/rr2qex8k/7 – Hammerbot Commented Mar 6, 2018 at 14:46
• See stackoverflow./questions/39782176/… – Maksim Shamihulau Commented Nov 24, 2020 at 12:11

2 Answers 2

try this on your input tag

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>

or

<input type="number" />

you can check for patibility here:

https://caniuse./#search=type%3D%22number%22

You can use a getter and setter on a puted value to cleanse your input value on the way in:

const TextField = {
    template: '<div><input type="text" v-model="inputValue"></div>',
    props: ['value'],
    data(){
        return {
            number: 0
        }
    },
    puted: {
        inputValue: {
            get: function(){
                return this.number;
            },
            set: function(value){
                this.number = parseInt(value.replace(/\D/g, ''))
            }
        }
    }
}