Vue.js Form handling tutorial
In this post we will give you information about Vue.js Form handling tutorial. Hear we will give you detail about Vue.js Form handling tutorialAnd how to use it also give you demo for it if it is necessary.
we are going to learn about how to handle forms in vuejs with the help of examples.
V-Model
In Vue v-model directive helps us to create two-way data binding on form input,select and textarea elements.
What is two-way data binding?
Two data binding means
The data we changed in the view has updated the state.
The data in the state has updated the view.
Input element example
Let’s bind the html input element to a data property using v-model directive.
<template> <div> <form> <input type="name" placeholder="Name" v-model="name" /> </form> <p>My name is: {{name}}</p> </div></template><script> export default{ data:function(){ return{ name:'' } } }</script>In the above code, we have connected the name data property to a form input element.
Textarea element example
The textarea element allows us to write the multiline text.
<template> <div> <form> <textarea placeholder="Comment" v-model="comment" ></textarea> </form> <p style="white-space:pre-line"> My comment is: {{comment}} </p> </div></template><script> export default{ data:function(){ return{ comment:'' } } }</script>Checkbox example
Here we bind the multiple checkboxes to the same array data property hobbies.
<template> <fieldset> <legend>Choose your Hobbies</legend> <div> <input type="checkbox" id="coding" v-model="hobbies" /> <label for="coding">Games</label> </div> <div> <input type="checkbox" id="music" v-model="hobbies" /> <label for="music">Music</label> </div> </fieldset></template><script>export default { data: function() { return { hobbies: [] }; }};</script>Select element example
<template> <form> <select v-model="rating"> <option disabled value="">Choose your Rating</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <p>You've rated: {{ rating }}</p> </form></template><script>export default { data: function() { return { rating: "" }; }};</script>In the above code, we have bound the rating property to select element.
Radio button example
<template> <form> <span><input type="radio" id="male" value="Male" v-model="gender" /> <label for="male">Male</label> <input type="radio" id="female" value="Female" v-model="gender" /> <label for="female">Female</label> <p>Gender: {{ gender }}</p> </form></template><script>export default { data: function() { return { gender: "" }; }};</script>Submitting form
Let’s see how to submit the form to the backend.
<template> <form @submit.prevent="handleSubmit"> <input type="name" placeholder="name" v-model="name"/> <input type="radio" id="male" value="Male" v-model="gender" /> <label for="male">Male</label> <input type="radio" id="female" value="Female" v-model="gender" /> <label for="female">Female</label> <button type="submit">Submit</button> </form></template><script>export default { data: function() { return { name:"", gender: "" }; }, methods:{ handleSubmit:function(){ console.log('Name'.this.name); console.log('Gender'.this.gender); } }};</script>Here we added a @submit event listener to the form element with .prevent modifier, so that we stopped the browser default re-loading behavior whenever we submit a form.
Hope this code and post will helped you for implement Vue.js Form handling tutorial. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs