Handling User Input in Vue.js

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: