by Sai gowtham

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:

App.vue
<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.

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course