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

Published on April 16, 2020 30 sec read

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

Monthly Newsletter

One email a month, packed with the latest tutorials, delivered straight to your inbox.
We'll never send any spam or promotional emails.
Author

Hey, I'm Md Obydullah. I build open-source projects and write on Laravel, Linux server, modern JavaScript and more on web development. If you enjoy my content, please consider supporting what I do!

Follow Buy me a coffeeBuy me a coffee

Leave a Reply

Your email address will not be published. Required fields are marked *