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.

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2021 (Beginner + Advanced)
JavaScript - The Complete Guide 2021 (Beginner + Advanced)
64,026 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 - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
152,857 students enrolled
48.5 hours of video content
View Course