Vue converts input[type=number] to a string value

Question

I'm running into the problem, that Vue converts the value of an input field of type number into a string and I just can't figure out why. The guide I am following along does not run into this issue and get's the values as numbers, as expected.

The vue docs state, that Vue would convert the value to a number, if the type of the input is number.

The code is originated from a component, but I adjusted it to run in JSFiddle: https://jsfiddle.net/d5wLsnvp/3/

<template>
    <div class="col-sm-6 col-md-4">
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">
                    {{ stock.name }}
                    <small>(Price: {{ stock.price }})</small>
                </h3>
            </div>
            <div class="panel-body">
                <div class="pull-left">
                    <input type="number" class="form-control" placeholder="Quantity" v-model="quantity"/>
                </div>
                <div class="pull-right">
                    <button class="btn btn-success" @click="buyStock">Buy</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['stock'],
        data() {
            return {
                quantity: 0 // Init with 0 stays a number
            };
        },
        methods: {
            buyStock() {
                const order = {
                    stockId: this.stock.id,
                    stockPrice: this.stock.price,
                    quantity: this.quantity
                };
                console.log(order);
                this.quantity = 0; // Reset to 0 is a number
            }
        }
    }
</script>

The quantity value is the issue. It is initialized with 0 and when I just press the "Buy" button, the console shows:

Object { stockId: 1, stockPrice: 110, quantity: 0 }

But as soon as I change the value by either using the spinners or just type in a new value, the console will show:

Object { stockId: 1, stockPrice: 110, quantity: "1" }

Tested with Firefox 59.0.2 and Chrome 65.0.3325.181. Both state that they are up to date. I actually also tried it in Microsoft Edge, with the same result.

So what am I missing here? Why is Vue not converting the value to a number?

tony19 · Accepted Answer · 2022-07-15 19:38:15Z

198

You need to use .number modifier for v-model, like this:

<input v-model.number="quantity" type="number">

Note: empty string ('') is not converted to a number, so you may need to handle it separately.

edited Jul 15, 2022 at 19:38

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 10, 2018 at 8:44

Frax

6,0702 gold badges21 silver badges25 bronze badges

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

8 Comments

Frax Over a year ago

As a note, I found it by simply googling [vue v-model number input]. It's the top result.

Korashen Over a year ago

Hm, well, yes, it works, and I feel kind of dumb now... My searches returned several threads on github and co about the same issue without any solution, but that link was not in it... also it seems that the guide I am using is outdated... anyways, thanks for the help

Frax Over a year ago

I can't tell if and when it used to work. It may be that Vue 1.0 worked differently. And don't worry too much about unsuccessful googling, it happens to everyone. I added the comment more for the reference, so you can see what phrase worked here.

Nishanth Shaan Over a year ago

excellent answer! the only one I could find in the internet, that works! :) thanks +1

chuuke Over a year ago

Is there anyway to achieve this without the use of v-model? ie when using vuex?

|

James Skemp · Accepted Answer · 2020-05-04 01:57:54Z

4

Change the order object to :

const order = {
    stockId: this.stock.id,
    stockPrice: this.stock.price,
    quantity: +this.quantity
};

This will automatically parse the string to a number.

In general the data from HTML inputs are strings. The input type only checks if a valid string has been provided in the field.

edited May 4, 2020 at 1:57

James Skemp

8,6119 gold badges71 silver badges116 bronze badges

answered Apr 10, 2018 at 8:17

Andreas Rau

3362 silver badges12 bronze badges

Collectives™ on Stack Overflow

Vue converts input[type=number] to a string value

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related