Me encuentro con el problema de que Vue convierte el valor de un campo de entrada de número de tipo en una cadena y no puedo entender por qué. La guía que estoy siguiendo no se encuentra con este problema y obtiene los valores como números, como se esperaba.

Los documentos de vue indican que Vue convertiría el valor en un número, si el tipo de entrada es número.

El código se origina a partir de un componente, pero lo ajusté para que se ejecutara en 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>

El valor de la cantidad es el problema. Se inicializa con 0 y cuando solo presiono el botón "Comprar", la consola muestra:

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

Pero tan pronto como cambie el valor usando las flechas giratorias o simplemente escriba un nuevo valor, la consola mostrará:

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

Probado con Firefox 59.0.2 y Chrome 65.0.3325.181. Ambos afirman que están actualizados. De hecho, también lo probé en Microsoft Edge, con el mismo resultado.

Entonces, ¿qué me estoy perdiendo aquí? ¿Por qué Vue no convierte el valor en un número?