web-dev-qa-db-fra.com

Vue convertit l'entrée [type = nombre] en une valeur de chaîne

Je rencontre un problème: Vue convertit la valeur d’un champ d’entrée de type number en une chaîne et je ne vois pas pourquoi. Le guide que je suis en train de suivre ne se heurte pas à ce problème et contient les valeurs sous forme de chiffres, comme prévu.

La vue docs indique que Vue convertira la valeur en nombre si le type de l’entrée est numéro.

Le code provient d'un composant, mais je l'ai ajusté pour s'exécuter dans 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>

La valeur est le problème ..___. Elle est initialisée à 0 et lorsque je clique sur le bouton "Acheter", la console affiche:

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

Mais dès que je change la valeur en utilisant soit les spinners, soit simplement une nouvelle valeur, la console affiche:

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

Testé avec Firefox 59.0.2 et Chrome 65.0.3325.181. Les deux déclarent être à jour. En fait, je l’ai aussi essayé dans Microsoft Edge, avec le même résultat.

Alors qu'est-ce qui me manque ici? Pourquoi Vue ne convertit-il pas la valeur en nombre?

javascriptvue.js
6
Korashen

Vous devez utiliser .number MODIFICATEUR POUR v-model , comme ceci:

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

Modifiez l'objet de commande en:

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

Cela analysera automatiquement la chaîne en un nombre.

En général, les données des entrées HTML sont des chaînes. Le type d'entrée vérifie uniquement si une chaîne valide a été fournie dans le champ.

1
Andreas Rau