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

Passing data from Laravel to Vue

min read

Làm thế nào để gửi dữ liệu từ Laravel đến Vue đây, nếu như ta có ý định xây dựng một hệ thống CMS với sự kết hợp của Laravel + Vue. Thì ta sẽ phải dùng mọi cách có thể để gửi dữ liệu qua lại,vậy làm sao đây ta! thôi làm thử xem sao ::)

Example: 
 - Login laravel success
 - Send data Auth()->id and Auth()->name to Component Vue

Đầu tiên ta chạy câu lệnh: php artisan make:auth mà laravel đã cung cấp cho ta sẵn các phần login và register
Bạn vào thư mục resources/views/layouts/app.blade.php có thể chỉnh sửa lại như sau:

<div id="app">
  
    @if (Auth::id()>0)
        <main-component :user-name='@json(auth()->user()->name)' 
                  :user-id='@json(auth()->user()->id)'></main-component>
    @else
        <p>Bạn vui lòng quy lại đăng nhập hệ thông! <a href="{{route('login')}}">Login</a></p>
    @endif
     
</div>

Trong đoạn code bên trên ta kiểm tra xem login thành công chưa, nếu thành công sẽ thực thi <main-component></main-component>. Nếu login không thành công sẽ hiện thông báo đăng nhập lại
Tiếp theo vào thư mục resources/js tạo component MainComponent.vue và import component này vào file app.js

//MainComponent.vue
<template>
    <div>
        <ul class="treeview-menu">
            <li><router-link to="/admin/default"><i class="fa fa-circle-o"></i>Main</router-link></li>
            <li><router-link :to="{ name: 'post', params: { userId } }"><i class="fa fa-circle-o"></i>Posts</router-link></li>
            <li><router-link :to="{name:'lists',params:{userId}}"><i class="fa fa-circle-o"></i>Lists post</router-link></li>  
            <li><router-link :to="{name:'category',params:{userId}}"><i class="fa fa-circle-o"></i>Categories</router-link></li>
        </ul>
    </div>
</template>
<script>
    export default{
        props:['userId','userName'],
        data(){
            return{
                  URL_LINK:'http://localhost:8000', 
            }
        },
        mounted(){
          
        },
        methods:{
            logout(){
                axios.post(this.URL_LINK+"/admin/logout").then((response)=>{
                    if (response.status === 204) {
                         document.location.href="/admin/login";
                    }
                    else {
                        document.location.href="/admin/default";
                    }
                }).catch(error => {
                     document.location.href="/admin/login";
                });
             
            }
        }
    }
</script>

Để nhận được dữ liệu từ laravel gửi đến vue qua component, ta cần dùng Props:['userId','userName'], bên cạnh đó nếu ta muốn logout thì cần dùng axios.post("http://localhost:8000/logout") nhé, còn ở đây vì mình đã chỉnh sửa lại đường dẫn login và logout nên nhìn hơi khác xíu.

//route in Vue
const router = new VueRouter({
    mode: 'history',
    routes: [
        {
          path:"/admin/default",
          name:'home',
          component:HomeComponent  
        },
        {   
            path:"/admin/post",
            component: Dashboard,
            children:[
                {
                    path:"",
                    name:'post',
                    component: PostComponent,
                    props:true
                },
                {
                    path:"lists",
                    name:"lists",
                    component: ListsPostComponent,
                    props:true
                },
                {
                    path:"edit",
                    component:EditPost,
                    props: (route) => ({query: route.query.id })
                }
            ]
        },
        {
            path:"/admin/category",
            component:Dashboard,
            children:[
                {
                    path:"",
                    name:'category',
                    component:AddCategory,
                    props:true
                }
            ]
        }
    ]
});
const app = new Vue({
    el: '#app',
    router,
    components: { MainComponent },
});

Dưới đây là phần phía xử lý logout bên Laravel và route định tuyến.

//LoginController.php in laravel
public function logout(Request $request)
{
   // $request->user();
    $this->guard()->logout();
    return response()->json([], 204);
}

//web.php in laravel 
Route::group(['prefix' => 'admin'], function () {
    Auth::routes();
});

Bạn có thể xem thêm bài viết về sự kết hợp của Laravel + Vue: 

Create Template Vuejs and Laravel 5.4

+ Xây dụng chức năng Register+ Login bằng Laravel 5.4 + VueJS

Create Cart Laravel 5.4 +VueJS

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!)