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

Published on Apr 16, 2020

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

Comments (0)