Trong bài chia sẻ trước mình đã giới thiệu mọi người cách sử dụng multiple Subcategories trong Laravel 5.8 (Create Multiple Subcategories in Laravel 5.8). Hôm nay chúng ta cùng đặt câu hỏi xem, nếu xây dựng CMS Laravel + Vue, thì multiple Subcategories ta phải làm sao nhỉ?
Đầu tiên chúng ta return về data json multiple Subcategories, sau đó Vue sẽ dùng thư viện Axios lấy về và hiển thị ra thôi, nhưng làm sao để hiển thị được nhiều cấp trong Vue?

File CategoryController.php

class CategoryController extends Controller
{
    public function index()
    {
       
        $category = Category::where('parent_id',0)->with('childrenCategories')->get()->toArray();
        // dd($category);
        return Response()->json(array("multiple"=>$category));

    }
}

Trong file trên chúng ta return dữ liệu về dạng Json. Để bên phía Front-End xử lý.

File model Category.php

class Category extends Model
{

    public function categories()
    {
        return $this->hasMany(Category::class,'parent_id');
    }
    public function childrenCategories()
    {
        return $this->hasMany(Category::class,'parent_id')->with('childrenCategories');
    }
}

Đó là xong phần Back-End bên phía Laravel, giờ chúng ta xử lý phần Front-End bên phía Vue thôi nào!
Vào thư mục resources/js/components và tạo file ListsCategory.vue như sau

<template>
    <div class="row">
        <div class="col-md-6">
            <ul>
                <li v-for='(item,index) in multipleCategory' :key="index">{{item.name}}
                    <ul>
                        <children-category :items="item.children_categories"></children-category>
                    </ul>
                </li>   
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            title:"Add Category",
            multipleCategory:{},
            URL_LINK:"http://localhost:8000"
        }
    },
    mounted(){
        this.getAllCategories();
    },
    methods:{
        getAllCategories(){
            axios.get(this.URL_LINK+"/api/categories").then(item=>{
                this.multipleCategory = item.data['multiple'];
            });
        }
    }
}
</script>

Trong file trên các bạn thấy mình có send data tới ChildrenComponent. Chính vì thế chúng ta cần tạo file ChildrenComponent.vue trong resources/js/components
Bên cạnh đó mình tạo một method getAllCategories() dùng lấy tất cả dữ liệu, từ Laravel return về cho Vue xử lý

File ChildrenComponent.vue 

<template>
        <div>
            <li v-for="(item,index) in dataChild" :key="index">{{item.name}}
                    <ul>
                        <children-category :items="item.children_categories"></children-category>
                    </ul>
            </li>
        </div>
    </template>
    <script>
    export default {
        props:['items'],
        data(){
            return{
                dataChild:{}
            }
        },
        mounted(){
            this.dataChild=this.items
        }
    }
    </script>

Để nhận được dữ liệu từ ListsComponent.vue. Thì trong ChildrenComponent.vue phải sử dụng Props:['items']
Nhìn lên phía bên trên tại sao ta lại gọi lại chính nó, chúng ta cần đệ quy lại chính nó, để tiếp tục lấy các Subcategories con
Cũng như thông thường, để chạy được Vue, bạn cần import các component vào app.js trong thư mục resources/js/app.js và cần phải run cho biên dịch lại các component chúng ta vừa tạo nhé:
npm run watch
php artisan serve