Vue Js Delete Multiple Rows Item Using Checkbox

<!DOCTYPE html>
<html>

<body>
  <div id="app">
    <h3>Vue.js Delete Multiple Rows Data Using Checkbox</h3>
    <button class="delete-button" @click="handleDeleteRows">Delete Selected Rows</button>
    <table class="data-table">
      <thead>
        <tr>
          <th class="select-header">Select</th>
          <th class="id-header">ID</th>
          <th class="name-header">Name</th>
          <th class="email-header">Email</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in data" :key="row.id" class="data-row">
          <td>
            <input type="checkbox" :checked="selectedRows.includes(row.id)"
              @change="handleRowSelection(row.id, row.email)" />
          </td>
          <td class="id-cell">{{ row.id }}</td>
          <td class="name-cell">{{ row.name }}</td>
          <td class="email-cell">{{ row.email }}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script type="module">
    const app = Vue.createApp({
      data() {
        return {
          selectedRows: [],
          data: [
            { id: 4, name: "Alice Brown", email: "alice@example.com" },
            { id: 5, name: "David Wilson", email: "david@example.com" },
            { id: 6, name: "Sarah Davis", email: "sarah@example.com" },
            { id: 7, name: "Michael Clark", email: "michael@example.com" },
            { id: 8, name: "Linda Martinez", email: "linda@example.com" },
            { id: 9, name: "Robert Miller", email: "robert@example.com" },
            { id: 10, name: "Karen Anderson", email: "karen@example.com" }
          ]

};
      },
      methods: {
        handleRowSelection(rowId, email) {
          if (this.selectedRows.includes(rowId)) {
            this.selectedRows = this.selectedRows.filter((id) => id !== rowId);
          } else {
            this.selectedRows.push(rowId);
          }

this.data = this.data.map((row) => {
            if (row.id === rowId) {
              return { ...row, email };
            }
            return row;
          });
        },
        handleDeleteRows() {
          this.data = this.data.filter((row) => !this.selectedRows.includes(row.id));
          this.selectedRows = [];
        },
      },
    });
    app.mount("#app");
  </script>

h3 {
      margin: 20px 0;
      font-size: 24px;
    }

.delete-button {
      background-color: #e74c3c;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      margin-bottom: 20px;
    }

.delete-button:hover {
      background-color: #c0392b;
    }

.data-table {
      border-collapse: collapse;
      width: 100%;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

.data-table th,
    .data-table td {
      border: 1px solid #ddd;
      padding: 10px;
      text-align: left;
    }

.data-table th {
      background-color: #3498db;
      color: #fff;
    }

.select-header {
      width: 10%;
    }

.id-header {
      width: 20%;
    }

.name-header {
      width: 30%;
    }

.email-header {
      width: 40%;
    }

.data-row:hover {
      background-color: #f5f5f5;
    }

.id-cell {
      font-weight: bold;
    }

.email-cell {
      color: #27ae60;
    }

input[type="checkbox"] {
      margin-left: 5px;
      vertical-align: middle;
    }

/* Styling the checked checkbox */
    input[type="checkbox"]:checked+label {
      background-color: #27ae60;
      color: #fff;
    }

/* Hide the default checkbox */
    input[type="checkbox"]+label {
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: #fff;
      border: 1px solid #ccc;
      cursor: pointer;
      text-align: center;
      line-height: 18px;
      border-radius: 3px;
      margin: 0;
    }

/* Add a hover effect to the checkbox label */
    input[type="checkbox"]+label:hover {
      background-color: #ddd;
    }
  </style>
</body>

</html>