Handling User Input in Vue.js
Last Updated :
28 Apr, 2025
Vue.js is a progressive framework for building user interfaces. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries. Vue is also perfectly capable of powering sophisticated Single-Page Applications in combination with modern tooling and supporting libraries.
Handling User Input in Vue.js: User input can be handled using the directives such as v-model and v-on. The v-model directive binds the value of an input field to a property on the Vue instance, allowing for two-way data binding. The v-on directive binds a method to an event on an element, allowing the method to be called when the event occurs. Additionally, v-bind can be used to bind the value of an input element to a property on the Vue instance. In order to understand the concept of Handling User Input in Vue.js, we need to know about the data() and V-model in Vue.js
data(): Data is the private memory of each component where you can store any necessary variables. in order to use these variables in the component.
V-model: The v-model is a two-way binding, meaning if you change the input value, the bound data will change. The v-model directive is used to create two-way data bindings on form input, textarea, and select elements.
Before we proceed to make simple user input handling, make sure that Vue.js must be installed in the system. If not, then refer to the Vue.js Introduction & Installation article for a detailed installation procedure.
Example 1: This example describes the basic use of the v-model and v-on directives that help to render the user-filled data simultaneously. The data filled in by the user will be displayed in the console upon submitting the form.
JavaScript
<template>
<div class="hello">
<img alt="GFG logo"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png" />
<h3>
Handling User Input in Vue.js
</h3>
<div class="info">
<h2>Name : {{ info.name }}</h2>
<input v-model="info.name"
placeholder="Enter Name" />
<h2>
Enter Message : {{ info.message }}
</h2>
<textarea v-model="info.message"
placeholder="Enter Message"
rows="5"
cols="20">
</textarea>
<div>
<button @click="printInformation">
Print Information
</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: "UserInput",
props: {
msg: String,
},
data() {
return {
info: {
name: "",
message: "",
},
};
},
methods: {
printInformation() {
console.log(`Name : ${this.info.name}`);
console.log(`Message : ${this.info.message}`);
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
color: green;
text-align:center
}
button {
border-radius: 6px;
background-color: rgb(100, 100, 248);
color: white;
margin-top: 5px;
padding: 10px;
width: max-content;
}
</style>
Output:
Example 2: This example describes the handling of the user input data by implementing the v-model directive. Here, also, the data filled in the form will be displayed in the console upon submitting the form.
JavaScript
<template>
<div class="gfg">
<img alt="GFG logo"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png" />
<h3>Handling User input in Vue.JS</h3>
<div class="info">
<h2>Name is : {{ info.name }}</h2>
<input v-model="info.name"
placeholder="Enter Name" />
<h2>Age is: {{ info.age }}</h2>
<input v-model="info.age"
placeholder="Enter Age" />
<h2>gender: {{ info.gender }}</h2>
<input type="radio"
id="male"
value="Male"
v-model="info.gender" />
<label for="male">Male</label>
<input type="radio"
id="female"
value="Female"
v-model="info.gender" />
<label for="female">Female</label>
<input type="radio"
id="other"
value="Other"
v-model="info.gender" />
<label for="other">
Other
</label>
<div>
<button @click="printInformation">
Print Information
</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: "UserInput2",
props: {
msg: String,
},
data() {
return {
info: {
name: "",
age: "",
gender: "",
},
};
},
methods: {
printInformation() {
console.log(`Name of user : ${this.info.name}`);
console.log(`Age of user : ${this.info.age}`);
console.log(`Gender : ${this.info.gender}`);
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.gfg {
color: green;
text-align: center;
}
button {
border-radius: 6px;
background-color: rgb(100, 100, 248);
color: white;
margin-top: 5px;
padding: 10px;
width: max-content;
}
</style>
Output:
Similar Reads
Vue.js Form Input Value Binding Vue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers
5 min read
Vue.js Form Input Binding number Modifier Vue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers
2 min read
Vue.js Form Input Binding lazy Modifier Vue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers
3 min read
Vue.js Form Input Binding trim Modifier Vue.js is a progressive javascript framework for developing web user interfaces. It is a versatile framework providing high speed and performance. Â We can create Single Page Applications as well as Full Stack applications.Input Binding is used to sync and maintain the state of form input elements wi
2 min read
How to binding inline styles in Vue.js ? Vue.js is an open-source Model–View–ViewModel front-end JavaScript framework for building user interfaces and single-page applications. Every Web application needs HTML CSS styles for presenting a better User Interface. Vue.js allows you to dynamically render styling with data model structure. Usual
4 min read
Vue.js Form Input Binding with Select option Vue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers
3 min read
Vue.js Event Handling Vue.js is an open-source Model–View–ViewModel front-end JavaScript framework for building user interfaces and single-page applications. Vue.js has many own directives for DOM manipulation such as v-bind, v-on, v-model, etc. In this article, we will see how to handle the events and their Implementati
11 min read
Vue.js Form Input Binding with Multiline text Vue.js is a progressive javascript framework for developing web user interfaces. It is a versatile framework providing high speed and performance. Â We can create Single Page Applications as well as Full Stack applications.Input Binding is used to sync and maintain the state of form input elements wi
2 min read
Vue.js Form Input Binding with Radio Option Vue.js is a progressive javascript framework for developing web user interfaces. It is a versatile framework providing high speed and performance. We can create Single Page Applications as well as Full Stack applications.Input Binding is used to sync and maintain the state of form input elements wit
3 min read
Vue.js Method Handlers Vue.js Method Handlers are the way to handle the event in Vue.js when the logic for handling is more complex and not feasible to handle by an inline method handler. We use v-on directive and trigger method handler via a function call. We can define a method in the Vue Component which is accessed by
3 min read