Comment supprimer des utilisateurs sous le formulaire vue

Vue est un framework JavaScript moderne largement utilisé dans le domaine du développement Web. Lorsque vous développez une application Web, vous avez généralement besoin d'un formulaire pour permettre aux utilisateurs de saisir des informations. Cependant, vous devez parfois supprimer les utilisateurs existants du formulaire. Voyons ensuite comment utiliser Vue.js pour réaliser cette fonction.

1. Afficher tous les utilisateurs actuels

Tout d'abord, nous devons obtenir les informations sur les utilisateurs existants du backend et les afficher sur la page frontend. Nous pouvons utiliser des composants Vue.js pour réaliser cette fonction. Définissez un attribut de données dans le composant pour stocker toutes les informations utilisateur. Ensuite, utilisez la directive v-for pour parcourir tous les utilisateurs et afficher leurs détails.

<template>
  <div>
    <h2>All Users</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>
            <button @click="deleteUser(user.id)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: []
    };
  },
  methods: {
    deleteUser(id) {
      // TODO: Implement delete user functionality
    }
  },
  mounted() {
    // TODO: Fetch all users from backend and assign to this.users
  }
};
</script>

Dans la méthode montée du composant, nous pouvons faire une requête au backend pour obtenir toutes les informations des utilisateurs, puis les enregistrer dans le tableau this.users. Sur le bouton "Supprimer" de chaque utilisateur, nous ajoutons un événement click pour déclencher la méthode deleteUser(), en transmettant son ID.

2. Supprimer l'utilisateur spécifié

Ensuite, nous devons supprimer l'utilisateur avec l'ID spécifié dans la méthode deleteUser(). Nous pouvons utiliser la bibliothèque axios pour envoyer une demande DELETE au backend afin de supprimer l'utilisateur et mettre à jour le tableau this.users afin que la liste des utilisateurs puisse être mise à jour.

<template>
  <div>
    <h2>All Users</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>
            <button @click="deleteUser(user.id)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    };
  },
  methods: {
    deleteUser(id) {
      axios.delete(`/api/users/${id}`)
        .then(response => {
          // Successfully deleted user from backend.
          // Update users array to refresh table.
          this.users = this.users.filter(u => u.id !== id);
        })
        .catch(error => {
          console.log(`Error deleting user with ID ${id}.`, error);
        });
    }
  },
  mounted() {
    axios.get('/api/users')
      .then(response => {
        // Successfully fetched all users from backend.
        // Update users array to refresh table.
        this.users = response.data;
      })
      .catch(error => {
        console.log('Error fetching all users.', error);
      });
  }
};
</script>

Dans cet exemple, nous utilisons la bibliothèque axios pour faire une requête DELETE au backend et transmettre l'ID utilisateur à supprimer en paramètre. Après avoir supprimé avec succès l'utilisateur, nous mettons à jour le tableau this.users afin que la liste des utilisateurs puisse être mise à jour. Nous ajoutons également du code de gestion des erreurs pour gérer les cas où la suppression échoue.

Résumé

En utilisant Vue.js et la bibliothèque axios, nous pouvons facilement implémenter la fonction de suppression des utilisateurs existants dans le formulaire. Nous envoyons d'abord une requête GET au backend pour obtenir toutes les données utilisateur et les afficher sur la page frontend. Ensuite, nous ajoutons un bouton « Supprimer » et un événement click pour déclencher la méthode de suppression. Dans la méthode delete, nous envoyons une requête DELETE au backend pour supprimer l'utilisateur avec l'ID spécifié et mettre à jour le tableau des utilisateurs après avoir supprimé avec succès l'utilisateur.

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!