7. Remove Data

tech

Table of Content

• Template
• Logic
• Backendnya

Template

<tr v-for="(ap, index) in paginatedFilteredApplications" :key="index">
		<button class="btn btn-danger btn-sm text-white" @click="deleteApplication(ap.id)"><i class="bi bi-trash-fill"></i></button>
	</td>
</tr>

Jika di jquery onClick="namaFunc(id) kalau di Vuejs pakai @click="namaFunc(id)".

Logic

import Swal from 'sweetalert2';
 
export default {
// ...
methods: {
	deleteApplication(id){
		Swal.fire({
			title: 'Konfirmasi',
			text: "Yakin ingin menghapus data?",
			icon: 'warning',
			showCancelButton: true,
			confirmButtonColor: '#3085d6',
			cancelButtonColor: '#d33',
			confirmButtonText: 'Yes, delete it!'
		}).then((result) => {
			if (result.isConfirmed) {
				axios.delete(`/api/remove`, {
					data: {id: id }
				})
					.then(res => {
						Swal.fire({
							title: 'Deleted!',
							icon: 'success',
							text: res.message
						});
 
						this.fetchApplications();
					}).catch(err => {
						Swal.fire({
							title: 'Error!',
							text: 'Wah parah nih ada masalah!',
							icon: 'error'
						});
					});
			}
		});
	}
}
}

Backendnya

public function remove(Request $req){
	DB::table('applications')->where('id', $req->id)->delete();
	return response()->json(['message' => 'Berhasil menghapus data!']);
}

Disini kurang lebih hampir mirip penggunaan axios dengan ajax. Jadi ngga kaget dan lebih ke penyesuaian aja sih…

Date: 25-07-2024