Comment implémenter la soumission et l'édition d'un formulaire Vue

Pour implémenter la soumission et l'édition du formulaire dans Vue, vous devez prendre en compte les trois aspects suivants :

1. Liaison et modification des données du formulaire
2. Traitement des données après la soumission du formulaire
3. Remplissage des données lors de l'édition du formulaire

Ensuite, nous allons Commençons par ce qui précède Présentons en détail la méthode d'implémentation de soumission et d'édition de formulaire Vue sous trois aspects.

1. Liaison et modification des données du formulaire

Pour lier et modifier les données du formulaire dans Vue, vous devez utiliser la directive v-model, via laquelle le formulaire peut être lié aux données de l'instance du composant. Par exemple, nous pouvons implémenter une simple liaison de formulaire via le code suivant :

<template>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" v-model="name">

    <label for="age">Age:</label>
    <input type="number" id="age" v-model="age">

    <button type="submit" @click.prevent="submitForm()">Submit</button>
  </form>
</template>

<script>
  export default {
    data() {
      return {
        name: '',
        age: ''
      }
    },
    methods: {
      submitForm() {
        // 表单提交逻辑
      }
    }
  }
</script>

Dans le code ci-dessus, nous lions le nom et l'âge du formulaire aux données de nom et d'âge de l'instance du composant via la directive v-model. Lorsque les données du formulaire changent, Vue synchronise automatiquement les données modifiées avec les données de l'instance du composant.

2. Traitement des données après la soumission du formulaire

Une fois le formulaire soumis, nous devons traiter les données du formulaire. Ici, nous pouvons implémenter la soumission de formulaire via des fonctions de gestion d'événements. Dans Vue, le nom de l'événement de soumission du formulaire est submit. Nous pouvons lier la méthode submitForm() dans le composant à l'événement submit,

Par exemple :

<form @submit.prevent="submitForm()">

De cette façon, lorsque l'utilisateur soumet le formulaire, le submitForm( ) la méthode sera appelée . Dans la méthode submitForm(), nous pouvons obtenir les données du formulaire et les traiter en conséquence. Par exemple, nous pouvons soumettre les données du formulaire au serveur pour stockage :

export default {
  data() {
    return {
      name: '',
      age: ''
    }
  },
  methods: {
    async submitForm() {
      const formData = {
        name: this.name,
        age: this.age
      }

      // 提交表单数据到服务器端
      await axios.post('/api/user', formData)

      // 处理完数据之后重置表单
      this.name = ''
      this.age = ''
    }
  }
}

Lorsque les données du formulaire sont soumises au serveur, nous réinitialisons les données du formulaire, permettant à l'utilisateur de ressaisir de nouvelles données.

3. Remplissage des données lors de la modification du formulaire

Dans les applications pratiques, nous devons généralement aider les utilisateurs à modifier les données, puis nous devons remplir les données dans le formulaire. Dans Vue, nous pouvons obtenir des données du côté serveur dans la fonction hook Mounted() et remplir les données dans le formulaire. Par exemple, nous pouvons utiliser le code suivant pour implémenter le remplissage des données lorsque les utilisateurs modifient des données :

mounted() {
  // 获取用户数据并回填到表单中
  axios.get('/api/user/' + this.uid).then(response => {
    const data = response.data
    this.name = data.name
    this.age = data.age
  })
},

Dans le code ci-dessus, nous obtenons les données du serveur et remplissons les données dans le formulaire. Ce qu'il faut noter ici, c'est que nous devons remplir les données dans l'instance du composant afin que les données puissent être liées au formulaire.

Résumé

Grâce à la mise en œuvre des trois aspects ci-dessus, nous pouvons implémenter efficacement la soumission et l'édition de formulaires Vue. Il convient de noter que dans Vue, les fonctions de liaison de données et de gestion des événements du formulaire peuvent être implémentées via les instructions v-model et @event. Ces instructions nous permettent d'implémenter la fonction de soumission de formulaire de manière simple et efficace. Dans le même temps, nous pouvons également obtenir des données du serveur via la fonction hook Mounted() et remplir les données dans le formulaire, afin que les utilisateurs puissent facilement modifier les données.

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!