Un guide complet / Blogs / Complet

Ce blog explore comment utiliser diverses entrées de formulaire dans Vue.js, telles que les champs de texte, les cases à cocher, les boutons radio, les cases de sélection, etc. Destiné aux débutants, il se concentre sur les puissantes fonctionnalités de liaison de données de Vue pour créer des formulaires interactifs dans des applications Web dynamiques.

Liaisons de saisie de texte

Les saisies de texte sont les éléments de formulaire les plus élémentaires, permettant aux utilisateurs de saisir du texte sur une seule ligne. Dans Vue.js, vous pouvez utiliser la directive « v-model » pour créer une liaison de données bidirectionnelle entre l’élément d’entrée et la propriété data dans votre instance Vue.

Saisie de texte multiligne

Pour la saisie de texte multiligne, vous pouvez utiliser le élément, qui prend également en charge « v-model » pour la liaison bidirectionnelle.

Entrée de case à cocher

Les cases à cocher sont idéales pour les options booléennes. Vous pouvez utiliser ‘v-model’ pour lier l’état coché de la case à cocher à une propriété de données.

Boutons radio

Les boutons radio permettent aux utilisateurs de sélectionner une option dans un groupe. Encore une fois, vous pouvez utiliser « v-model » pour lier la valeur sélectionnée.

Sélectionnez la liste déroulante

Sélectionnez les listes déroulantes permettant aux utilisateurs d’en choisir une option à partir d’une liste. Utilisez ‘v-model’ pour lier la valeur sélectionnée à une propriété de données.

Liste déroulante à sélection multiple

Pour sélectionner plusieurs options, utilisez le ‘‘ élément avec l’attribut ‘multiple’. ‘v-model’ peut lier un tableau de valeurs sélectionnées.

Liaisons de valeur

Le système de réactivité de Vue facilite la gestion et la manipulation des valeurs d’entrée. Vous pouvez également créer des propriétés ou des méthodes calculées pour gérer des scénarios complexes, tels que la validation d’entrées ou la transformation de données.

Exemple

Voici un exemple pratique qui montre comment implémenter ces liaisons d’entrée de formulaire dans Vue.js :

<template>
  <div class="form-container">
    <h3>Vue.js Form Input Bindings</h3>

    <!-- Text Input with Validation -->
    <div class="text-input">
      <label for="username">Username:</label>
      <input id="username" v-model="username" placeholder="Enter your username" @blur="validateUsername" />
      <p v-if="usernameError" class="error">{{ usernameError }}</p>
      <p>Your username is: {{ username }}</p>
    </div>

    <!-- Multiline Text Input with Character Count -->
    <div class="multiline-input">
      <label for="description">Description:</label>
      <textarea id="description" v-model="description" placeholder="Enter a description" maxlength="200"></textarea>
      <p>Characters remaining: {{ 200 - description.length }}</p>
      <p>Your description is: {{ description }}</p>
    </div>

    <!-- Checkbox Input -->
    <div>
      <div class="checkbox-input">
        <input type="checkbox" id="agreement" v-model="isAgreed" />
        <label for="agreement">I agree to the terms</label>
      </div>
      <p>Agreement status: {{ isAgreed }}</p>
    </div>

    <!-- Radio Buttons -->
    <div class="radio-input">
      <label>Choose an option:</label>
      <label>
        <input type="radio" value="option1" v-model="selectedOption" />
        Option 1
      </label>
      <label>
        <input type="radio" value="option2" v-model="selectedOption" />
        Option 2
      </label>
      <p>Selected option: {{ selectedOption }}</p>
    </div>

    <!-- Select Dropdown with Dynamic Industries -->
    <div class="select-dropdown">
      <label for="industries">Select an industry:</label>
      <select id="industries" v-model="chosenIndustry">
        <option disabled value="">Select an industry</option>
        <option v-for="industry in industries" :key="industry">{{ industry }}</option>
      </select>
      <p>Selected industry: {{ chosenIndustry }}</p>
    </div>

    <!-- Multiselect Dropdown for Technologies -->
    <div class="multiselect-dropdown">
      <label for="multipleTechnologies">Select multiple technologies:</label>
      <select id="multipleTechnologies" v-model="selectedTechnologies" multiple>
        <option v-for="technology in technologies" :key="technology">{{ technology }}</option>
      </select>
      <p>Selected technologies: {{ selectedTechnologies.join(', ') }}</p>
    </div>

    <!-- Value Binding with Transformation -->
    <div class="value-binding">
      <label for="rawInput">Raw Input:</label>
      <input id="rawInput" v-model="rawInput" placeholder="Type something" />
      <p>Uppercase: {{ upperCasedInput }}</p>
      <p>Reversed: {{ reversedInput }}</p>
    </div>

    <!-- Submit Button -->
    <button @click="submitForm">Submit</button>
    <p v-if="submissionMessage">{{ submissionMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      usernameError: '',
      description: '',
      isAgreed: false,
      selectedOption: '',
      chosenIndustry: '',
      selectedTechnologies: [],
      rawInput: '',
      industries: [],
      technologies: ['JavaScript', 'React.js', 'Next.js', 'Vue.js', 'SCSS'],
      submissionMessage: ''
    };
  },
  computed: {
    upperCasedInput() {
      return this.rawInput.toUpperCase();
    },
    reversedInput() {
      return this.rawInput.split('').reverse().join('');
    }
  },
  methods: {
    validateUsername() {
      this.usernameError = this.username.length < 3 ? 'Username must be at least 3 characters long.' : '';
    },
    async fetchIndustries() {
      // Simulating an asynchronous API call to fetch industries
      this.industries = await new Promise((resolve) => {
        setTimeout(() => {
          resolve(['Technology', 'Finance', 'Healthcare', 'Education', 'Retail']);
        }, 1000);
      });
    },
    submitForm() {
      if (this.usernameError || !this.isAgreed) {
        this.submissionMessage="Please fix the errors before submitting.";
        return;
      }
      this.submissionMessage="Form submitted successfully!";
      // Handle form submission logic here (e.g., API call)
    }
  },
  mounted() {
    this.fetchIndustries(); // Fetch industries on component mount
  }
};
</script>

<style scoped>
.form-container {
  max-width: 600px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f9f9f9;
}

label {
  display: block;
  margin: 10px 0;
}
.checkbox-input {
 display: flex;
 align-items: center;
}
.checkbox-input label{
  margin: 0 0 0 10px;
}

.error {
  color: red;
}

.checkbox-input {
  display: flex;
  align-items: center;
}
</style>

Explication du code

Section Modèle

• Chaque entrée de formulaire est enveloppée dans un ‘div’, et nous utilisons ‘v-modèle’ lier le champs de saisie aux propriétés de données correspondantes dans l’instance Vue.
• Pour la saisie de texte et zone de texteles utilisateurs peuvent voir leur contribution immédiatement reflétée dans les paragraphes ci-dessous.
• Le case à cocher et radio utilisation des boutons ‘v-modèle’ pour conserver leur état vérifié et leur valeur sélectionnée.
• Le sélectionner et listes déroulantes à sélection multiple permettre aux utilisateurs de choisir parmi des éléments prédéfinis choixavec les valeurs sélectionnées affichées dynamiquement.
• Le champ de saisie brut montre comment les propriétés calculées peuvent transformer les données d’entrée (en les convertissant en majuscules).

Section des scripts

• Le ‘données’ La fonction renvoie un objet contenant les propriétés réactives utilisées dans le modèle.
• Le ‘calculé’ propriété ‘upperCasedInput’ transforme le ‘Entrée brute’ en majuscules, mettant en valeur la réactivité de Vue.

Section Styles

• Le style de base améliore la présentation visuelle, garantissant que le formulaire est facile à lire et à interagir avec.

Sortir:

Applications du monde réel

Ces liaisons d’entrée peuvent être appliquées dans divers scénarios du monde réel, tels que :

• Formulaires d’inscription des utilisateurs
• Enquêtes et formulaires de commentaires
• Processus de paiement du commerce électronique
• Toute application nécessitant la saisie de l’utilisateur

Conclusion

Vue.js fournit un moyen puissant et intuitif de gérer les entrées de formulaire via son système de liaison. Qu’il s’agisse de saisies de texte, de cases à cocher ou de listes déroulantes, la directive « v-model » simplifie la gestion de l’état dans votre application. Avec ces outils, vous pouvez créer des formulaires dynamiques et réactifs qui améliorent l’expérience utilisateur.

Essayez d’implémenter ces liaisons de formulaire Vue.js dans vos propres projets et n’hésitez pas à partager vos expériences ou vos questions dans les commentaires ci-dessous. Bon codage !