Laravel/Vue.js simple form submission using Vue components.

Head back to ContactForm.vue and add this little Javascript at the bottom of the file after </template>.We’ve two object’s keeping track of our errors and form fieldsThere’s a method which will be called when we submit our form to send a POST request to our submission route, passing our form fields.When the request succeeds we simply alert.When the request fails, we check the status code and set the errors object.Then we edit our existing HTML in the <template> part of our code to:We add v-model directive to each of our input fields, to track the values and place it directly in our fields object.We check if there are any errors and if the errors match the current field, then we show it inline just beneath the field.On our <form> element we’ll add a little directive to call our submit method and prevent the form to do anything else.Make sure that your <head> contains the csrf token to be able to send ajax requests with axios: <meta name="csrf-token" content="{{ csrf_token() }}">Now that we can process our form on the client side, let’s make sure our backend is setup to handle the request..Create a new controller with the following command:php artisan make:controller ContactFormControllerThis created a new controller file named ContactFormController.php located in /app/Http/Controllers..Open this file and add the following:When the validation fails it automatically returns a 422 response ‘Unprocessable Entity’ included with error messages, which we catch in our component’s javascript.Head over to /routes/web.php and add the route to this controller method:Route::post('/submit', 'ContactFormController@submit');My route file will now look like this:<?phpRoute::get('/', function () { return view('welcome');});Route::post('/submit', 'ContactFormController@submit');Now that the route and controller is set-up, we can try to submit our form..Without any values you should see something like this:When you submit it correctly, you should see an alert..To make this a little more fancy we’ll add our message to the page, make sure the previous request is processed before sending a new one (client-side) and clear the form fields after a successful submit.We added a ‘loaded’ boolean so check if our previous request has been processed.We added a ‘success’ boolean to check if the request was successful, it it is we show an ‘alert message’ in the HTML using the v-if directive.Just a little extra, we could create a Vue mixin to make it a little bit more reuseable..Create a new file in /resouces/assets/js and call it FormMixin.js..Add the entire content of <script> inside of it and tweak it bit like:This is the entire content of FormMixin.jsWe’ve added a string in the data object ‘action’ and point to it as our URL in the axios POST method..So we can override it in our component.The next step is to replace the script in our component ContactForm.vue to:We can override the action so we can have a diffrent action for each new component extending FormMixin.js..Our entire ContactForm.vue component now looks like this:Our FormMixin.js located in /resources/assets/js looks like this:And that’s it, it’s a basic way of submitting forms using Laravel and Vue..Feel free to contact me if you have any questions or improvements, I’m happy to help.. More details

Leave a Reply