Membuat Blog dengan Laravel & VueJS - #13 | Halaman Kategori

Kita akan membuat komponen baru untuk menampilkan semua kategori yang ada di database.

Langsung saja kita kerjakan, berikut langkah-langkah dalam pembuatannya:

Membuat Komponen

Mari kita buat komponen baru dan kita namakan AllCategories.vue.

//AllCategories.vue
<template>
  <div>
    <div class="_container">
      <div class="admin-page-title">All Categories</div>
        <div class="h_wrap">
          <table class="table table-bordered">
          <thead>
            <tr>
              <th>#</th>  
              <th>Name</th>   
              <th>Actions</th>
            </tr>
          </thead>
           <tbody>
            <tr >
              <td>1</td>  
              <td style="width:600px">Laravel</td>   
              <td>  
              <button type="button" class="btn btn-primary">
                    Edit 
              </button> 
              <button type="button" class="btn btn-danger">
                    Delete 
              </button>
              </td>
            </tr>
           </tbody>
         </table>  
      </div>
    </div>
  </div>
</div> 
</template>

<script>
export default {

};
</script>

<style scoped>
.table-bordered{
  background-color: #ffffff;
}
</style>

Import komponen

Selanjutnya kita import dan juga kita buat routenya di  app.js.

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

{
   path: '/admin/allcategories',
   name: 'allcategories',
   component: AllCategories,
   props: true,
},
...

Router Link

Kita buka komponen MenuAdmin.vue dan kita buat menu router-link.

...
<li>
      <router-link :to="{ name: 'allcategories'}"><i class="fa fa-list"/>
      <span class="text"> ALL CATEGORIES </span></router-link>
</li>
...

Menampilkan Data Kategori

Selanjutnya kita akan membuat fungsi untuk menampilkan data kategori pada table All Categories.

Pertama kita akan membuat controller untuk kategori.

//terminal
php artisan make:controller CategoryController -r

Kemudian kita buka CategoryController.php dan kita buat fungsi untuk mengambil data pada method index.

//CategoryController.php
use App\Category;

public function index()
{
  return Category::all();
}

Selanjutnya kita buka komponen AllCategories.vue dan kita buat data lifecycle dan methods.

data:function() {
  return { 
    categories: [], 
  }
},
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);
     });
  },
}

Kemudian kita buat list rendering pada table untuk ditampilkan datanya.

//AllCategories.vue
...
<tbody v-for="cateogry in categories">
  <tr >
    <td>{{ cateogry.id }}</td>  
       <td style="width:600px">{{ cateogry.name }}</td>   
       <td>
          <button type="button" class="btn btn-primary">Edit</button>
          <button type="button" class="btn btn-danger">Delete</button>
      </td>
  </tr>
</tbody>
...

Sampai disini kita telah berhasil menampilkan list kategori yang ada pada database.