In this short article, we’re going to learn how to set maxlength for textarea in Vue.js with the remaining length countdown.

We’ll use v-model to get data from textare and will count remaining length using v-on:keyup method.

Let’s see the full example:

<template>
  <div id="app">
    <p>Total Remaining: <span v-bind:class="{'text-danger': generateErr }">{{totalRemainCount}}</span></p>
    <textarea class="form-control" v-on:keyup="liveCountDown" v-model="theMessage" placeholder=""></textarea>
  </div>
</template>

<script>
 export default{
    data: function () {
      return {
        limitmaxCount: 160,
        totalRemainCount: 160,
        theMessage: '',
        generateErr: false
      };
    },
    methods: {
      liveCountDown: function() {
        this.totalRemainCount = this.limitmaxCount - this.theMessage.length;
        this.generateErr = this.totalRemainCount < 0;
      }
    }
  }
</script>

That’s it. Thank you.