Getting a input field value in Vue app

In this tutorial, we are going to learn about how to get a input field value in the vue.js app.

Using v-model directive

If your using v-model directive to control your input fields, then you can get a input field value using v-model directive data property.

Example:

<template>
   <div>
      <input type="text" placeholder="User Name" v-model="name" />      <button @click="handleInput">Get input field value</button>   </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",    };
  },
  methods: {
    handleInput() {
      console.log(this.name); // logs the input value    },
  },
};
</script>

Now, if you enter a data inside the html <input> field and click on the Get input field value button you will see a input value is logged inside your browser’s console.