How to Set Maxlength for Textarea with Countdown in Vue.js

Published: Apr 16, 2020 - Updated: Mar 16, 2022

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:

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