1. Create Authentication In Laravel 5.8
  2. Create Cart Laravel 5.4 +VueJS
  3. Create Multiple Subcategories in Laravel 5.8
  4. Create Template Vuejs and Laravel 5.4
  5. Giới thiệu Laravel 5.4
  6. Hướng dẫn cài đặt laravel 5.4 phần 1
  7. Hướng dẫn cài đặt laravel 5.4 phần 2
  8. Passing data from Laravel to Vue
  9. Multiple Subcategories in Laravel 5.8 + Vue
  10. Login State in Angular 7 + Laravel 5.4
  11. Laravel 5.7 + Vue SPA
  12. Send Mail using Laravel 5.4 + VueJS
  13. SHOW DATA VUEJS IN TEMPLATE BLADE LARAVEL
  14. Xây dụng chức năng Register+ Login bằng Laravel 5.4 + VueJS
  15. Xác thực API bằng OAuth 2 với Laravel 5.4 Passport
  16. Tạo ứng dụng Laravel 5.4 kết hợp với Vuejs
  17. Create Multiple Comment in Laravel 5.8
  18. Filemanager in Laravel 5.8
  19. Connecting Multiple Databases in Laravel 5.8
  20. Laravel Redirect HTTP to HTTPS via .htaccess
  21. User Roles and Permissions in Laravel 5.8
  22. Export Excel using maatwebsite/excel in Laravel 5.8
  23. Show All Image from public folder using Laravel 5.8
  24. Multiple Image Upload using Ajax with Laravel 5.8
  25. Form Request Validation in Laravel 5.8
  26. Send Email using Queue in Laravel 5.8
  27. Ckeditor and Ckfinder in Laravel 5.8 + Vue.js
  28. Add a Marker to Google Map in Laravel 5.8
  29. Pagination for search results laravel 5.8
  30. Using React in Laravel 8
  31. Create Login and Register using Laravel 8 with React

Multiple Subcategories in Laravel 5.8 + Vue

min read

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

 

x

Ủng hộ tôi bằng cách click vào quảng cáo. Để tôi có kinh phí tiếp tục phát triển Website!(Support me by clicking on the ad. Let me have the money to continue developing the Website!)