How to add limit on input using Vue Js

#beginners #vue #javascript #webdev

Hey Artisan, welcome back to my new post.

In today's post I am going to describe how we can limit the input (how many characters should we allow to enter) on input box using VueJs.

Follow the given steps:
Firstly we will define the maxLength in the data() of vue js, and next we will bind the maxLength to the maxlength attribute of input box.

Create a Component and add below code

<div>
    <input type="text" v-model="value" placeholder="enter your name"
    :maxlength="maxLength"> 
    <span>{{ maxLength - value.length}} / {{ maxLength }}</span>
</div>

<script>
export default() {
   data: {
    maxLength: 10,
    value: ''
    }
}
</scrpit>