DEV Community

Cover image for How to add limit on input using Vue Js
Snehal Rajeev Moon
Snehal Rajeev Moon

Posted on • Updated on

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

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

export default() {
   data: {
    maxLength: 10,
    value: ''
Enter fullscreen mode Exit fullscreen mode

In this way you can limit the input filed.

Happy Reading 🦄 🦄 🦁 ❤️

Top comments (0)