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

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:

  <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>

 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;

That’s it. Thank you.

Software Engineer | Ethical Hacker & Cybersecurity...

Md Obydullah is a software engineer and full stack developer specialist at Laravel, Django, Vue.js, Node.js, Android, Linux Server, and Ethichal Hacking.