DEV Community

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

Posted on • Edited on

8 2 1 1 1

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 🦄 🦄 🦁 ❤️

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series