Membuat Blog dengan Laravel & VueJS - #14 | Edit Kategori

Data kategori telah berhasil kita tampilkan semuanya pada halaman allcategories yang selesai kita kerjakan di part sebelumnya.

Kemudian kita akan lanjutkan dipart ini dengan mengerjakan proses edit data untuk kategori. Kita akan membuat komponen /  halaman baru, mengambil data dan memperbaharui data kategori.

Membuat Komponen

Mari kita mulai dengan membuat sebuah komponen untuk halaman edit. Kita buat komponen baru dengan nama EditCategory.vue.

//EditCategory.vue
<template>
  <div class="_container">
    <div class="admin-page-title">Edit Category</div>
      <div class="_wrap-form">
        <div class="h_wrap">
        <form class="_bg-form">
          <div class="form-group"> 
            <input type="text" ref="name" class="form-control" id="name" placeholder="Name">
          </div>
          <button type="submit" class="btn btn-success">
              Submit
          </button>
          <router-link :to="{ name: 'allcategories'}">
            <button type="submit" class="btn btn-success">Back</button>
          </router-link>

        </form>
    </div>
  </div>
</div>
</template>

<script>
export default {

};
</script>

Import Komponen

Selanjutnya kita import dan buat routenya di app.js.

//app.js
import EditCategory from './components/EditCategory'

{
   path: '/admin/editcategory/:categoryId/edit',
   name: 'editcategory',
   component: EditCategory,
   props: true, 
},

Kita buat props :categoryId sebagai parameter yang mengambil id dari kategori.

Lalu pada komponen AllCategories.vue kita buat router-link dengan parameter yang mengambil id kategori.

//AllCategories.vue
...
<router-link :to="{ name: 'editcategory', params: { categoryId: cateogry.id } }">
  <button type="button" class="btn btn-primary">
      Edit 
  </button>
</router-link>
...

Menampilkan Data Kategori

Selanjutnya kita akan tampilkan data kategorinya yaitu nama dari kategori sesuai id.

//EditCategory.vue
 props: {
   categoryId: {
     type: Number,
     required: true
   }
 },
 data() {
   return {
      //
   };
 },
 created: function () {
   this.getCategory();
 },
 methods: { 
   getCategory() {
     axios.get('/api/categories/' + this.categoryId + '/edit')
     .then(response => {
       console.log(response.data.name);
       this.$refs.name.value = response.data.name;
     });
   },
 }
};

Nama kategori berhasil ditampilkan. Sebagai contoh pada gambar diatas kita akan melakukan edit kategori dengan id 1 yaitu laravel.

Selanjutnya setelah berhasil membua fungsi untuk menampilkan nama kategorinya, kita lanjutnya dengan membuat fungsi untuk update data.

CategoryController.php

//CategoryController.php
    public function update(Request $request, $id)
    {
       $this->validate($request, [
        'name' => 'required'
       ]);

       $category = Category::find($id);
       $category->name = $request->name;
       $category->save();

       return $category;
    }

//EditCategory.vue
<template>
  <div class="_container">
    <div class="admin-page-title">Edit Category</div>
  
    <span v-if="successful" class="label label-success">
      <h4>Updated!</h4>
      <small>(Kategori berhasil diperbaharui!)</small>
    </span>

      <div class="_wrap-form">
        <form class="_bg-form">         
          <div class="form-group">
            <span v-if="errors.name" class="badge badge-danger">{{errors.name[0]}}</span>
            <input type="text" class="form-control" ref="name" id="name" placeholder="Name">
          </div>   
          <button type="submit" @click.prevent="updateCategory" class="btn btn-primary">
            Submit
          </button>  
           <router-link :to="{name: 'allcategories'}">
            <button type="button" class="btn btn-success"> Back </button>   
          </router-link>    
        </form><br><br><br>
      </div>
    </div>
</template>

<script>
  export default{
    props:{
      categoryId:{
        type: Number,
        required : true
      }
    },
    data:function(){
      return{
        successful: false,
        errors:[], 
      }
    },
    created:function(){
      this.getCategory(); 
    },
    methods:{
      updateCategory(){
        let name = this.$refs.name.value;
        axios.put('/api/categories/' + this.categoryId, {name} )
          .then(response => {
            console.log(response.data);
            this.successful = true;
            this.errors = false;
          })
          .catch(error => {
            if((error.response.status = 422 )){
            console.log(error.response.data);
            this.errors = error.response.data.errors;
            this.successful = false;
            }
          }); 
      }, 
      getCategory(){
        axios.get("/api/categories/" + this.categoryId + "/edit")
          .then(response => {
            console.log(response.data);
            this.$refs.name.value = response.data.name;
        })
      }
    }

  }
</script>

<style scoped>
  .label-success{
    background-color: #4fca6b;
    display: inline-block;
    width: 100%;
    color: #fff;
    padding: 8px 15px;
    margin-bottom: 8px;
  }
  .label-success h4{
    margin-bottom: 0;
  }
</style>

Demikian, sampai disini kita telah menyelesaikan proses edit data untuk kategori beserta respon dan validasinya.

Silahkan dikerjakan, kita lanjut lagi di part selanjutnya.