Multiple Subcategories in Laravel 5.8 + Vue
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
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
Đó 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 resource/js/components và tạo file ListsCategory.vue như sau
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 resource/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
Để 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 gọi 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 resource/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
