How to set maxlength for textarea in VueJS

How to set maxlength for textarea in VueJS

In this Post We Will Explain About is How to set maxlength for textarea in VueJS With Example and Demo.Welcome on – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to VueJS Textarea characters remaining Example

In this post we will show you Best way to implement Add maxlength on textArea using VueJS, hear for set maxlength for textarea in VueJS with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Also Read :   Vuejs Implementing Routes And Multiple Views Example

Getting Started for How to set maxlength for textarea in VueJS

We have used CDN(libes) for VueJS so you must need Your internet Data connection for them to work on textarea maxlength validation in VueJS.

  <script src=""></script>


This is the main HTML view of our Simple Web Application. In here, we have init Base declared all our simple my this Example(countdown using Vue JS) dependencies and the HTML Elements that we have created.

<div id="liveApp">
  <div class="row">
    <div class="col-md-3">
      <h1 class='text-default'><span>Add a comment</span> <em class="text-light">(up to a 160 Remain characters)</em></h1>
      <textarea class="live24u form-control" v-on:keyup="liveCountDown" v-model="displayMsg" placeholder="Total Remaining..."></textarea>
      <p class='text-right text-small' v-bind:class="{'text-danger': generateErr }">{{totalRemainCount}}</p>


This contains our simple custom index.js files Add Like as javascript, vuejs scripts

Also Read :   Nested ng-repeat Checkboxes in AngularJS Example

var liveApp = new Vue({
  el: '#liveApp',
  data: {
    limitmaxCount: 160,
    totalRemainCount: 160,
    displayMsg: '',
    generateErr: false
  methods: {
    liveCountDown: function() {
      this.totalRemainCount = this.limitmaxCount - this.displayMsg.length;
      this.generateErr = this.totalRemainCount < 0;


Last step, we have add the Following CSS styles for our simple How to set maxlength for textarea in VueJS and our Custom styling.

body {
  padding: 22px;
textarea.form-control {
  height: 159px;
  margin-bottom: 10px;
.text-default {
  font-size: 2em;
.text-small {
  font-size: 0.9em;
.text-light {
  color: #3dc600;

set maxlength for textarea in VueJS

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Also Read :   How to count number of characters Limit in Textarea using vuejs


I hope you have Got What is VueJS Textarea characters remaining And how it works.I would Like to have FeedBack From My Blog( readers.Your Valuable FeedBack,Any Question,or any Comments about This Article( Are Most Always Welcome.