How to Get an Input Value in Vue

After taking input from users with a text field, there has to be a way to retrieve the data and do something with it. In this article, we’ll learn how to easily get the value of an input field in Vue.

The v-model Directive

To get an input value in Vue, we can use the v-model directive to set up a two-way binding between the value and a variable.

For example:

<template>
  <div id="app">
    <input
      type="text"
      v-model="text"
      placeholder="Text"
    />
    <br />
    You typed: <b>{{ text }}</b>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
};
</script>

Every time the user changes the text in the input field, the text variable will be updated automatically. We can then use this variable to perform an action or display information. In this example, we simply display the value of the input below it.

Using Vue Computed Properties with an Input Value

Instead of just displaying the value in the input field as it is, we could use a computed property to show information derived from the value.

For example, we could display the number of characters the value has:

<template>
  <div id="app">
    <input
      type="text"
      v-model="text"
      placeholder="Text"
    />
    <br />
    Character count: <b>{{ count }}</b>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
  computed: {
    // Computed property named "count", depending on the
    // "text" variable
    count() {
      return this.text.length;
    },
  },
};
</script>

How to Get an Input Value on Change

We can create a handler for the input event of the input component to perform an action with the input value when it is changed. We can listen for the event using the v-on directive (v-on:input), which can be shortened to the @ symbol (@input).

In the following example, we use the input event to log the new input value in the developer console when it changes.

<template>
  <div id="app">
    <input
      type="text"
      v-model="text"
      placeholder="Text"
      @input="handleInput"
    />
    <br />
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
  methods: {
    handleInput(event) {
      console.log(event.target.value);
    },
  },
};
</script>

We can also the input event to implement a custom one-way binding between the input field value and a variable. Instead of v-model, we can use the value prop to set the text in the input manually.

In the following example, we use the input event and the value prop to space out the digits of the card number entered in the input field and provide a better user experience.

<template>
  <div id="app">
    <input
      type="text"
      :value="cardNo"
      placeholder="Card number"
      @input="handleInput"
      @keypress="handleKeyPress"
    />
    <br />
  </div>
</template>

<script>
export default {
  data() {
    return {
      cardNo: '',
    };
  },
  methods: {
    handleInput(event) {
      this.cardNo = event.target.value
        // Remove spaces from previous value
        .replace(/\s/g, '')
        // Add a space after every set of 4 digits
        .replace(/(.{4})/g, '$1 ')
        // Remove the space after the last set of digits
        .trim();
    },
    handleKeyPress(event) {
      const num = Number(event.key);
      const value = event.target.value;
      // Only allow 16 digits
      if ((!num && num !== 0) || value.length >= 16 + 3) {
        event.preventDefault();
      }
    },
  },
};
</script>

How to Get an Input Value with a Ref

In most scenarios, v-model and @input/value will be sufficient for reading or updating the value of an input field. However, we can also use the ref attribute to get the input value. We can set this attribute on any DOM element and use the $refs property of the Vue instance to access the object that represents the element.

For example:

<template>
  <div id="app">
    <!-- Create new ref by setting "ref" prop -->
    <input
      type="text"
      placeholder="Text"
      ref="inputField"
    />
    <button @click="handleShout">Shout</button>
    <br />
    <b>{{ shout }}</b>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shout: '',
    };
  },
  methods: {
    handleShout() {
      // Access ref with "$refs" property
      const message = this.$refs.inputField.value;
      this.shout = `${message.toUpperCase()}!!!`;
    },
  },
};
</script>

Every Crazy Thing JavaScript Does

A captivating guide to the subtle caveats and lesser-known parts of JavaScript.