Vueフォームでユーザーを削除する方法-フロントエンドQ&A-php.cn

Vueフォームでユーザーを削除する方法

PHPz

リリース： 2023-04-12 14:16:54

オリジナル

721 人が閲覧しました

Vue は、Web 開発の分野で広く使用されている最新の JavaScript フレームワークです。 Web アプリケーションを開発するときは、通常、ユーザーが情報を入力できるフォームが必要になります。ただし、場合によっては、フォームから既存のユーザーを削除する必要がある場合があります。次に、この機能を実現するために Vue.js を使用する方法を見てみましょう。

現在のユーザーをすべて表示

まず、バックエンドから既存のユーザー情報を取得し、それをフロントエンドページに表示する必要があります。 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() メソッドをトリガーするクリックイベントを追加します。

指定されたユーザーの削除

次に、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 配列を更新します。また、削除が失敗した場合に対処するためのエラー処理コードも追加します。

まとめ

Vue.jsとaxiosライブラリを利用することで、フォーム内の既存ユーザーを削除する機能を簡単に実装できます。まずバックエンドに GET リクエストを送信して、すべてのユーザーデータを取得し、フロントエンドページに表示します。次に、「削除」ボタンと、削除メソッドをトリガーするクリックイベントを追加します。 delete メソッドでは、DELETE リクエストをバックエンドに送信して、指定された ID を持つユーザーを削除し、ユーザーの削除に成功した後に users 配列を更新します。

以上がVueフォームでユーザーを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。