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?