Comment ajouter ou supprimer dynamiquement les champs de formulaire dans Vue?

Les méthodes d'ajout ou de supprimer dynamiquement les champs de formulaire dans Vue sont les suivantes: 1. Utilisez un tableau pour stocker les données de champ et mettez automatiquement à mettre à jour le DOM avec le système réactif de Vue; 2. Créez une méthode pour ajouter des champs, ajouter de nouveaux éléments au tableau par push () et définir une limite supérieure; 3. Créez une méthode pour supprimer les champs, utiliser Splice () pour supprimer en toute sécurité les champs de l'indice spécifié et définir un numéro de rétention minimum; 4. Pour les données de formulaire complexes, vous pouvez utiliser un tableau d'objets pour stocker plusieurs types de champs et leurs valeurs pour obtenir une gestion des entrées plus flexible.

Dans Vue, l'ajout ou la suppression de champs de formulaire dynamiquement est une exigence courante lors de la création de formulaires flexibles, comme permettant aux utilisateurs de saisir plusieurs adresses e-mail, numéros de téléphone ou adresses. La clé est de gérer les données de formulaire avec le système de réactivité de Vue et d'utiliser v-for pour rendre les champs dynamiquement.

Décomposons-le en étapes pratiques.

Utilisation d'un tableau pour stocker des champs dynamiques

Le fondement des champs dynamiques de Vue utilise un tableau pour stocker les valeurs. La réactivité de Vue fonctionne bien avec les mutations du tableau, donc lorsque vous ajoutez ou supprimez les éléments du tableau, le DOM met à jour automatiquement.

Par exemple:

 données() {
  retour {
    Courriels: ['']
  }
}

Puis dans votre modèle:

 <div v-for = "(e-mail, index) dans les e-mails": key = "index">
  <entrée v-model = "e-mail" type = "e-mail" />
  <bouton @ click = "removeMail (index)"> supprimer </fontificateur>
</div>
<bouton @ click = "addemail"> Ajouter un e-mail </ bouton>

Cela met en place une boucle qui rend une entrée par e-mail dans le tableau.

Ajout d'un nouveau champ avec un bouton

Pour ajouter un nouveau champ, créez une méthode qui pousse une chaîne vide (ou une valeur par défaut) dans le tableau:

 Méthodes: {
  addemail () {
    this.emails.push ('')
  }
}

Maintenant, lorsque l'utilisateur clique sur "Ajouter un e-mail", un nouveau champ de saisie apparaît.

Vous pouvez également fixer une limite pour empêcher l'ajout de trop de champs:

 Méthodes: {
  addemail () {
    if (this.emails.length <5) {
      this.emails.push (&#39;&#39;)
    }
  }
}

Cela évite l'éclat de l'utilisateur avec trop d'entrées.

Supprimer un champ en toute sécurité

La suppression d'un champ est tout aussi importante. Utilisez splice() pour supprimer un élément du tableau par index:

 Méthodes: {
  retireMail (index) {
    this.emails.splice (index, 1)
  }
}

Quelques choses à noter:

• Utilisez toujours splice() au lieu de delete car il modifie correctement le tableau et Vue y réagira.
• S'il ne reste plus qu'un champ, vous voudrez peut-être le laisser vide au lieu de le retirer:

 retireMail (index) {
  if (this.emails.length> 1) {
    this.emails.splice (index, 1)
  }
}

Cela empêche l'utilisateur de supprimer accidentellement tous les champs.

Gestion des données de formulaire complexe (facultatif)

Si vos champs de formulaire sont plus complexes que les chaînes simples, comme avoir plusieurs entrées par article, vous pouvez plutôt stocker des objets dans le tableau:

 données() {
  retour {
    Contacts: [
      {Type: 'Email', valeur: ''}
    ]]
  }
}

Puis dans le modèle:

 <div v-for = "(contact, index) dans les contacts": key = "index">
  <sélectionnez V-model = "Contact.Type">
    <Option Value = "Email"> Email </ Option>
    <Option Value = "Phone"> Téléphone </ Option>
  </lect>
  <entrée v-model = "contact.value" />
  <bouton @ click = "RemoveContact (index)"> Supprime </fontificateur>
</div>
<bouton @ click = "addContact"> Ajouter un contact </futh>

Et les méthodes:

 Méthodes: {
  addContact () {
    this.contacts.push ({type: 'e-mail', valeur: ''})
  },
  removeContact (index) {
    if (this.contacts.length> 1) {
      this.Contacts.splice (index, 1)
    }
  }
}

Cela vous donne plus de flexibilité pour gérer différents types d'entrées.

Ainsi, la gestion dynamiquement des champs de formulaire dans VUE consiste essentiellement à mettre à jour un tableau et à laisser Vue repenser en fonction de cela. Ce n'est pas compliqué une fois que vous avez obtenu le modèle - gérez simplement le tableau, liez les entrées avec v-model et utilisez v-for les parcourir.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!