How to delete users in vue form

Vue is a modern JavaScript framework that is widely used in the field of web development. When you develop a web application, you usually need a form to let users enter information. However, sometimes you need to delete existing users from the form. Next, let's take a look at how to use Vue.js to achieve this function.

1. Display all current users

First, we need to obtain existing user information from the backend and display it on the frontend page. We can use Vue.js components to achieve this function. Define a data attribute in the component to store all user information. Then, use the v-for directive to loop through all users and display their details.

<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 the mounted method of the component, we can make a request to the backend to get the information of all users, and then save it in the this.users array. On each user's "Delete" button, we add a click event to trigger the deleteUser() method, passing in its ID.

2. Delete the specified user

Next, we need to delete the user with the specified ID in the deleteUser() method. We can use the axios library to make a DELETE request to the backend to delete the user, and update the this.users array so that the user list can be updated.

<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 this example, we use the axios library to make a DELETE request to the backend and pass the user ID to be deleted as a parameter. After successfully deleting the user, we update the this.users array so that the user list can be updated. We also add some error handling code to handle cases where deletion fails.

Summary

By using Vue.js and the axios library, we can easily implement the function of deleting existing users in the form. We first send a GET request to the backend to get all the user data and display it on the frontend page. Then, we add a "Delete" button and a click event to trigger the delete method. In the delete method, we send a DELETE request to the backend to delete the user with the specified ID and update the users array after successfully deleting the user.

The above is the detailed content of How to delete users in vue form. For more information, please follow other related articles on the PHP Chinese website!