Categories
Vue Answers

How to get an input field value in Vue.js?

Spread the love

Sometimes, we want to get an input field value in Vue.js.

In this article, we’ll look at how to get an input field value in Vue.js.

How to get an input field value in Vue.js?

To get an input field value in Vue.js, we can bind the input value to a reactive property with v-model.

For instance, we write

<template>
  <div>
    <input v-model="groupId" />
  </div>
</template>

<script>
export default {
  //...
  data() {
    return {
      groupId: 1,
    };
  },
  //...
};
</script>

to bind the groupId reactive property to the input value with the v-model directive.

Then when we enter a value into the input box, we get the latest input value set as the value of groupId.

Conclusion

To get an input field value in Vue.js, we can bind the input value to a reactive property with v-model.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *