So löschen Sie Benutzer im Vue-Formular

Vue ist ein modernes JavaScript-Framework, das im Bereich der Webentwicklung weit verbreitet ist. Wenn Sie eine Webanwendung entwickeln, benötigen Sie normalerweise ein Formular, über das Benutzer Informationen eingeben können. Manchmal müssen Sie jedoch vorhandene Benutzer aus dem Formular löschen. Schauen wir uns als Nächstes an, wie Sie Vue.js verwenden, um diese Funktion zu erreichen.

1. Alle aktuellen Benutzer anzeigen

Zunächst müssen wir vorhandene Benutzerinformationen aus dem Backend abrufen und diese auf der Frontend-Seite anzeigen. Wir können Vue.js-Komponenten verwenden, um diese Funktion zu erreichen. Definieren Sie in der Komponente ein Datenattribut, um alle Benutzerinformationen zu speichern. Verwenden Sie dann die v-for-Direktive, um alle Benutzer zu durchlaufen und ihre Details anzuzeigen.

<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>

In der gemounteten Methode der Komponente können wir eine Anfrage an das Backend stellen, um alle Benutzerinformationen abzurufen, und diese dann im Array this.users speichern. Auf der Schaltfläche „Löschen“ jedes Benutzers fügen wir ein Klickereignis hinzu, um die Methode deleteUser() auszulösen und ihre ID zu übergeben.

2. Löschen Sie den angegebenen Benutzer

Als nächstes müssen wir den Benutzer mit der angegebenen ID in der Methode deleteUser() löschen. Wir können die Axios-Bibliothek verwenden, um eine DELETE-Anfrage an das Backend zu stellen, um den Benutzer zu löschen, und das Array this.users zu aktualisieren, damit die Benutzerliste aktualisiert werden kann.

<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>

In diesem Beispiel verwenden wir die Axios-Bibliothek, um eine DELETE-Anfrage an das Backend zu stellen und die zu löschende Benutzer-ID als Parameter zu übergeben. Nach erfolgreichem Löschen des Benutzers aktualisieren wir das Array this.users, damit die Benutzerliste aktualisiert werden kann. Wir fügen auch Fehlerbehandlungscode hinzu, um Fälle zu behandeln, in denen das Löschen fehlschlägt.

Zusammenfassung

Durch die Verwendung von Vue.js und der Axios-Bibliothek können wir die Funktion zum Löschen vorhandener Benutzer im Formular problemlos implementieren. Wir senden zunächst eine GET-Anfrage an das Backend, um alle Benutzerdaten abzurufen und auf der Frontend-Seite anzuzeigen. Anschließend fügen wir eine Schaltfläche „Löschen“ und ein Klickereignis hinzu, um die Löschmethode auszulösen. Bei der Löschmethode senden wir eine DELETE-Anfrage an das Backend, um den Benutzer mit der angegebenen ID zu löschen und das Benutzerarray zu aktualisieren, nachdem der Benutzer erfolgreich gelöscht wurde.

Das obige ist der detaillierte Inhalt vonSo löschen Sie Benutzer im Vue-Formular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!