In Vue, Handling form inputs is straightforward and follows the principles of data binding.
We can use the "v-model" directive to create two-way data bindings on form input elements, which means that changes in the input elements will automatically update the associated data in our Vue component, and vice versa.
User Input Gathering: Form inputs are used to collect user input, such as text, numbers, dates, and selections.
Data Binding: Vue's v-model directive enables two-way data binding between form inputs and Vue instance data, allowing seamless synchronization between the UI and application state.
Form Submission: Vue.js provides event handling mechanisms to capture form submission events, validate input data, and submit the form data to a server.
<template>
<form @submit.prevent="submitForm">
<input type="text" v-model="userName" />
<p>Username is: {{ userName }}</p>
<select v-model="selectedCity">
<option value="city1">City 1</option>
<option value="city2">City 2</option>
<option value="city3">City 3</option>
</select>
<p>Selected City: {{ selectedCity }}</p>
<input type="checkbox" id="checkbox" v-model="isStudent" />
<label for="checkbox"> Are you Student? </label>
<p>Selected Checkbox value: {{ isStudent }}</p>
<button type="submit">Submit Form</button>
</form>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
userName: "",
selectedCity: "",
isStudent: false,
};
},
methods: {
submitForm() {
// Perform data validation
if (this.userName.trim() === "") {
alert("Username is required field");
return;
} else if (this.selectedCity.trim() === "") {
alert("City is required field");
return;
}
// Using 3rd Party Library `axios` we can Send form data to server
axios
.post("https://www.example.com/api/feedbackform", {
userName: this.userName,
selectedCity: this.selectedCity,
isStudent: this.isStudent,
})
.then((response) => {
console.log(response.data);
})
.catch((error) => {
console.error(error);
});
},
},
};
</script>
We have an input field bound to "userName" using "v-model". Whatever is typed in this input field will be reflected in the "userName" data property.
We have a select dropdown bound to "selectedCity" using "v-model". The selected option in the dropdown will be reflected in the "selectedCity" data property.
We have a checkbox bound to "isStudent" using "v-model". The state of the checkbox will be reflected in the "isStudent" data property.
when all the required field data added, then it will make call to server to submit form data.
This is the basic usage of form inputs in Vue using "v-model".
Vue also provides modifiers for form inputs, such as ".number" and ".trim", which can be used to automatically transform input values before updating the data property.
Additionally, we can handle form submissions using methods and events like "@submit".
