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


Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

What is Blitz.js & How to Get Started With It

A React Application Meant To Keep Track Of The Most Popular Crypto Currencies Status