How to add limit on input using Vue Js

snehalkadwe

Snehal Rajeev Moon

Posted on October 14, 2021

How to add limit on input using Vue Js

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>
Enter fullscreen mode Exit fullscreen mode

In this way you can limit the input filed.

Happy Reading 🦄 🦄 🦁 ❤️

💖 💪 🙅 🚩
snehalkadwe
Snehal Rajeev Moon

Posted on October 14, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related