8
votes

Comment créer une entrée toujours en majuscule dans vue.js?

Je crée un formulaire en utilisant vue.js et je dois créer des entrées en vue toujours en majuscules. Je sais que je pourrais utiliser la propriété css

text-transform: uppercase;

puis transformez les données avant l'envoi en utilisant

data.someData.toUpperCase()

Mais je me demande s'il existe une manière plus intelligente de faire cela dans vue.js. En réaction, nous pouvons créer des entrées contrôlées et le faire facilement. Y a-t-il quelque chose comme ça dans Vue.js?

J'ai réussi à le faire en utilisant des champs calculés, cependant, je devrais créer un getter et un setter calculés pour chaque entrée du formulaire. Y a-t-il une meilleure façon de le faire?

vue.js vue-component vuejs2

4 commentaires

Vous devriez jeter un œil aux propriétés computed . vuejs.org/v2/guide/computed.html

Merci Monsieur. C'était rapide.

Je l'ai posté comme réponse

Cependant, je dois créer un getter et un setter calculés pour chaque champ. Je pensais qu'il y avait un moyen de le faire une seule fois pour chaque entrée.

4 Réponses :

2
votes

Vous pouvez créer une directive personnalisée.

<input type="text" v-model="modelfield" v-touppercase>

Et puis utilisez-le là où vous en avez besoin. Par exemple:

Vue.directive( 'touppercase', {
    update (el) {
        el.value = el.value.toUpperCase()
    },
})

2 commentaires

Cela fonctionne, mais il envoie le mot avec la dernière lettre en minuscule au serveur ...

cela ne fonctionne pas, car le dernier caractère est en minuscule.

0
votes

Comme vous n'avez pas beaucoup de code à exécuter, vous devez lier manuellement les événements à votre champ de texte, puis gérer les majuscules à cet endroit.

La gestion des événements à partir d'un champ de texte peut être effectuée en y ajoutant un gestionnaire d'événements d' input , puis en mettant à nouveau à jour l'état initial.

<input :value="text" @input="text = $event.target.value.toUpperCase()"/>

Vous pouvez également le faire en ligne dans un modèle, mais cela peut rendre la lecture plus difficile en fonction de vos préférences de style de code

<input :value="text" @input="updateText($event.target.value)"/>

export default {
    data() {
        return {
            text: '',
        }
    },
    methods: {
        updateText(newValue) {
            this.value = newValue.toUpperCase();
        },
    }
}

2 commentaires

Je devrais encore créer une méthode pour chaque champ unique du formulaire.

@IanPierreGomes J'ai ajouté une variante qui montre le code sur une seule ligne

0
votes

Cette directive fonctionne bien avec v-model (le dernier caractère est également en majuscules):

<input type="text" v-model="myField" v-uppercase />

Usage:

Vue.directive('uppercase', {
  update(el) {
    const sourceValue = el.value;
    const newValue = sourceValue.toUpperCase();

    if (sourceValue !== newValue) {
      el.value = newValue;
      el.dispatchEvent(new Event('input', { bubbles: true }));
    }
  },
});

0 commentaires

0
votes

Tu peux le faire:

<input :value="theValue" @input="theValue = theValue.toUpperCase()"/>

0 commentaires