Trong bài viết này, tôi sẽ hướng dẫn các bạn cách sử dụng Vue.js để xử lý thông báo lỗi khi validation trong Laravel.

Cài đặt môi trường

Vì làm việc với framework Laravel nên trước tiên các bạn cần có một project Laravel. Để tạo một project mới, tham khảo tại Laravel Install. Trong bài này, tôi đang thao tác trên project với tên blog với lệnh. Đương nhiên là tên project các bạn có thể đặt tùy theo ý thích của mình.

Tiếp theo, chúng ta cần cài đặt Laravel Elixir , Laravel Elixir là công cụ cho phép chúng ta thực hiện Gulp bên trong ứng dụng Laravel. Chúng ta sẽ xử dụng Laravel Elixir để biên dịch những file javascript được viết ra. Để cài đặt, chạy lệnh

Đến đây, chúng ta đã có 1 project Laravel cho phép chạy lệnh Gulp. Tiếp theo, cần cài thêm một vài thư viện cho project của bạn.

  • Vue.js : Tiêu đề bài viết là làm việc với Vue.js. Nên không thể thiếu nó được. ^^
  • vue-resource: Là một HTTP client cho Vue.js. Tạo các request và xử lý kết quả trả về sử dụng XMLHttpRequest hoặc JSONP.
  • laravel-elixir-vueify: Cho phép bạn có thể viết templates, scripts, styles trong cùng một file .vue.

Cài đặt:

Việc chuẩn bị môi trường đến đây đã hoàn tất. ^^

Gõ Code

Mở file routes.php và thêm dòng lệnh sau:

Tạo một controller mới với tên PostController với nội dụng như sau:

Trong ví dụ này, tôi chỉ làm validate đơn giản với hai trường là title và body và chỉ check validation là required. Các bạn có thể thử với những validate phức tạp hơn. ^^

Tiếp theo, tạo một file .blade trong thư mục /resources/views với tên post.blade.php với nội dung sau:

Tạm đến đây đã. Chạy chương trình và xem kết quả nào. Kết quả chương trình sẽ như sau:

screen-shot-2017-01-06-at-10-32-02-am

Bí mật tối ưu hóa PHP & PHP7 hàng đầu. Đăng kí tìm hiểu ngay!
Bí mật tối ưu hóa PHP & PHP7 hàng đầu. Đăng kí tìm hiểu ngay!

Tới đây, các bạn cũng cần phải nghiên cứu qua một chút về Vue.js để hiểu hơn nội dung trong file blade bên trên nhé. Ở đây mình sẽ không nói thêm về cấu trúc của Vue.js nữa.

Tiếp theo, tạo một thư mục js trong resources/assests. Tạo file app.js trong thư mục js vừa được tạo với nội dung.

Để chạy được Gulp, cần sửa trong file gulpfile.js với nội dung:

Trong file app.js trên, có đoạn code tôi sử dụng components với tên FormError. Tới đây, cần tạo file FormError.vue trong thư mục /resources/assets/js/components với nội dung

Công việc tới đây là hoàn tất. Mở Terminal và chạy gulp và xem thành quả nhé. 🙂

Khi validate failed:

screen-shot-2017-01-06-at-10-33-58-am

Khi validate success:

screen-shot-2017-01-06-at-10-34-41-am