Membuat Blog dengan Laravel & VueJS - #15 | Hapus Kategori

Setelah button edit dan proses editing data kategori telah selesai kita kerjakan dipart sebelumnya, kita akan lanjutkan untuk mengerjakan button delete dimana fungsinya untuk menghapus kategori.

Penghapusan kategori ini dilakukan di halaman allcategories yang terdapat button delete pada form, dan kita tidak membuat halaman baru seperti halnya dalam pengerjaan button edit yang mereturn ke halaman lain dan menampilkan data kategori, tetapi kita hanya akan membuat event dengan parameter yang mengambil id dari kategori pada button delete.

Kita akan membuat event handling, membuat fungsi penghapusan kategori yang akan kita buat pada komponen AllCategories.vue.

AllCategories.vue

Pada komponen AllCategories.vue, pertama kita buat event @click pada button delete dengan nama method dan parameter yang mengambil id dari kategori.

//AllCategories.vue
<button type="button" @click="deleteCategory(cateogry.id)" class="btn btn-danger">Delete</button>

Kemudian pada properti methods kita buat request axios dengan method delete.

deleteCategory(id) {
 axios.delete("/api/categories/" + id)
  .then(response => {
    console.log('deleted!');
    this.getCategories();
  });
} 

CategoryController.php

Selanjutnya kita buka CategoryController.php dan kita buat fungsi pada method destroy.

//CategoryController.php
    public function destroy($id)
    {
        $category = Category::find($id); 
        $category->delete();

        return response()->json($category);
    }

Sampai disini kita sudah bisa menghapus kategori yang kita pilih untuk dihapus pada halalman allcategories.

Kita akan lanjutkan dengan membuat respon pesan saat kategori berhasil dihapus.

Pada komponen AllCategories.vue kita buat elemen span beserta directive dan isi pesan yang akan ditampilkan.

<span v-if="successful" class="label label-danger"><h4>deleted!</h4><p>(Pos berhasil dihapus.)</p></span>

Kemudian tambahkan data properti dengan memberi statement false.

  data:function() {
    return { 
      categories: [], 
      successful: false,
    }
  },

Lalu saat data dikirim, kita ubah statement/pernyataan menjadi true untuk menampilkan pesan.

//AllCategories.vue
.then(response => {
   console.log('deleted!');
   this.getCategories();
   this.successful = true;
});

Hasil akhir komponen AllCategories.vue:

//AllCategories.vue
<template>
  <div>
    <div class="_container">
      <div class="admin-page-title">All Categories</div>
      <span v-if="successful" class="label label-danger"><h4>deleted!</h4><p>(Pos berhasil dihapus.)</p></span>
        <div class="h_wrap">
          <table class="table table-bordered">
          <thead>
            <tr>
              <th>#</th>  
              <th>Name</th>   
              <th>Actions</th>
            </tr>
          </thead>
          <tbody v-for="cateogry in categories">
            <tr >
              <td>{{ cateogry.id }}</td>  
              <td style="width:600px">{{ cateogry.name }}</td>   
              <td> 
              <router-link :to="{ name: 'editcategory', params: { categoryId: cateogry.id } }">
                <button type="button" class="btn btn-primary">
                    Edit 
                </button>
              </router-link>
                <button type="button" @click="deleteCategory(cateogry.id)" class="btn btn-danger">Delete</button>
              </td>
            </tr>
          </tbody>
         </table>  
      </div>
    </div>
</div>
</template>

<script>
export default {
  data:function() {
    return { 
      categories: [], 
      successful: false,
    }
  },
  created: function () { 
      this.getCategories();
  },
   methods: {
      getCategories() {
        axios.get('/api/categories')
          .then(response => {
            console.log(response.data);
              this.categories = response.data;
          })
          .catch(error => {
              console.log(error.response.data);
        });
    },
     deleteCategory(id) {
        axios.delete("/api/categories/" + id)
          .then(response => {
            console.log('deleted!');
            this.getCategories();
            this.successful = true;
          });
    } 
  }
};
</script>

<style scoped>
  .table-bordered{
    background-color: #ffffff;
  }
  .label-danger {
    color: #f1f1f1;
    display: inline-block;
    margin-bottom: 17px;
    background: #dc3545eb;
    width: 100%;
    padding: 5px 15px;
  } 
  .label-danger h4, .label-danger p{
    margin-bottom: 0;
  }
</style>

Jika dilihat hasilnya akan seperti gambar dibawah ini.