Vue 将输入[ type = number ]转换为字符串值

我遇到了一个问题 Vue 把类型为 number 的输入字段的值转换成了一个字符串我不知道为什么。我所遵循的指南并没有遇到这个问题，而是按照预期的那样以数字的形式获取值。

Vue 文档指出，如果输入的类型是 number，则 Vue 将把值转换为数字。

该代码源自一个组件，但我将其调整为在 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>

数量价值是个问题。 它初始化为0，当我按下“购买”按钮时，控制台显示:

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

但是一旦我通过使用微调器或者只是输入一个新值来更改值，控制台就会显示:

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

使用 Firefox 59.0.2和 Chrome 65.0.3325.181进行测试。两人都说他们是最新的。我实际上也在 MicrosoftEdge 中尝试过，得到了同样的结果。

那么我在这里遗漏了什么? 为什么 Vue 没有将值转换成数字？