Vue 형식에서 사용자를 삭제하는 방법

Vue는 웹 개발 분야에서 널리 사용되는 최신 JavaScript 프레임워크입니다. 웹 애플리케이션을 개발할 때 일반적으로 사용자가 정보를 입력할 수 있는 양식이 필요합니다. 하지만 양식에서 기존 사용자를 삭제해야 하는 경우가 있습니다. 다음으로 이 기능을 구현하기 위해 Vue.js를 사용하는 방법을 살펴보겠습니다.

1. 현재 사용자 모두 표시

먼저 백엔드에서 기존 사용자 정보를 가져와서 프런트엔드 페이지에 표시해야 합니다. 이 기능을 구현하기 위해 Vue.js 구성 요소를 사용할 수 있습니다. 모든 사용자 정보를 저장하려면 구성 요소에 데이터 속성을 정의합니다. 그런 다음 v-for 지시문을 사용하여 모든 사용자를 반복하고 세부 정보를 표시합니다.

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

컴포넌트의 마운트 방식에서는 백엔드에 모든 사용자 정보를 가져오도록 요청한 다음 이를 this.users 배열에 저장할 수 있습니다. 각 사용자의 "삭제" 버튼에 해당 ID를 전달하는 deleteUser() 메서드를 트리거하는 클릭 이벤트를 추가합니다.

2. 지정된 사용자 삭제

다음으로 deleteUser() 메서드에서 지정된 ID를 가진 사용자를 삭제해야 합니다. axios 라이브러리를 사용하여 백엔드에 DELETE 요청을 보내 사용자를 삭제하고 사용자 목록이 업데이트될 수 있도록 this.users 배열을 업데이트할 수 있습니다.

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

이 예에서는 axios 라이브러리를 사용하여 백엔드에 DELETE 요청을 하고 삭제할 사용자 ID를 매개변수로 전달합니다. 사용자를 성공적으로 삭제한 후 사용자 목록을 업데이트할 수 있도록 this.users 배열을 업데이트합니다. 또한 삭제가 실패한 경우를 처리하기 위해 일부 오류 처리 코드를 추가합니다.

Summary

Vue.js와 axios 라이브러리를 이용하면 기존 사용자를 폼에서 삭제하는 기능을 쉽게 구현할 수 있습니다. 먼저 모든 사용자 데이터를 가져와 프런트엔드 페이지에 표시하기 위해 백엔드에 GET 요청을 보냅니다. 그런 다음 "삭제" 버튼과 클릭 이벤트를 추가하여 삭제 메서드를 실행합니다. 삭제 메소드에서는 백엔드에 DELETE 요청을 보내 지정된 ID를 가진 사용자를 삭제하고 사용자를 성공적으로 삭제한 후 사용자 배열을 업데이트합니다.

위 내용은 Vue 형식에서 사용자를 삭제하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!