web-dev-qa-db-fra.com

Quelle est la bonne façon d'implémenter le formatage sur v-model dans Vue.js 2.0

Pour un exemple simple: zone de texte pour saisir les données monétaires . L’exigence est d’afficher la saisie de l’utilisateur au format "1 234 567 $" et de supprimer le point décimal.

J'ai essayé de voir la directive. La méthode update de la directive n'est pas appelée lorsque l'interface utilisateur est actualisée en raison d'autres contrôles. alors la valeur dans textbox revient à celle sans mise en forme.

J'ai aussi essayé v-on: changer le gestionnaire d'événements. Mais je ne sais pas comment appeler une fonction globale dans le gestionnaire d'événements. Il n'est pas recommandé de créer une méthode de conversion de devise dans chaque objet Vue.

Alors, quelle est la méthode standard de formatage dans Vue 2.0 maintenant?

Cordialement

vue.js
14
flyfrog

Veuillez vérifier cet exemple de travail jsFiddle: https://jsfiddle.net/mani04/bgzhw68m/

Dans cet exemple, l'entrée de devise formatée est un composant en soi, qui utilise v-model comme tout autre élément de formulaire dans Vue.js. Vous pouvez initialiser ce composant comme suit:

<my-currency-input v-model="price"></my-currency-input>

my-currency-input est un composant autonome qui formate la valeur monétaire lorsque la zone de saisie est inactive. Lorsque l'utilisateur place le curseur à l'intérieur, la mise en forme est supprimée afin de permettre à l'utilisateur de modifier facilement la valeur.

Voici comment cela fonctionne:

Le composant my-currency-input a une valeur calculée - displayValue, qui définit les méthodes get et set. Dans la méthode get, si la zone de saisie n'est pas active, elle renvoie la valeur de la devise au format.

Lorsque l'utilisateur tape dans la zone de saisie, la méthode set de la propriété calculée displayValue émet la valeur à l'aide de $emit, avertissant ainsi le composant parent de cette modification.

Référence pour l'utilisation de v-model sur des composants personnalisés: https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events

21
Mani

Voici un exemple de travail: https://jsfiddle.net/mani04/w6oo9b6j/

Cela fonctionne en modifiant la chaîne d'entrée (votre valeur monétaire) pendant les événements de focus-out et de focus-in, comme suit:

<input type="text" v-model="formattedCurrencyValue" @blur="focusOut" @focus="focusIn"/>

  1. Lorsque vous placez le curseur dans la zone de saisie, il prend this.currencyValue et le convertit au format standard afin que l'utilisateur puisse le modifier.

  2. Une fois que l'utilisateur a tapé la valeur et cliqué ailleurs (focus out), this.currencyValue est recalculé après avoir ignoré les caractères non numériques et le texte d'affichage est formaté comme il convient.

Le formateur de devises (reg exp) est un copier-coller à partir d'ici: Comment puis-je formater des nombres en argent en JavaScript?

Si vous ne souhaitez pas que le point décimal soit tel que mentionné précédemment, vous pouvez utiliser this.currencyValue.toFixed(0) dans la méthode focusOut.

7
Mani

J'ai implémenté un composant. Selon la réponse de Mani, il devrait utiliser $ emit.

Vue.component('currency', {
template: '<input type="text"' +
            ' class="form-control"' +
            ' :placeholder="placeholder""' +
            ' :title="title"' +
            ' v-model="formatted" />',
props: ['placeholder', 'title', 'value'],
computed: {
    formatted: {
        get: function () {
            var value = this.value;
            var formatted = currencyFilter(value, "", 0);
            return formatted;
        },
        set: function (newValue) {
            var cleanValue = newValue.replace(",", "");
            var intValue = parseInt(cleanValue, 10);
            this.value = 0;
            this.value = intValue;
        }
    }
}
}

)

0
flyfrog