3

How to add limit on input using Vue Js

 2 years ago
source link: https://dev.to/snehalk/how-to-add-limit-on-input-using-vue-js-3eco
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Cover image for How to add limit on input using Vue Js
Snehal

Posted on Oct 14

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

<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 modeExit fullscreen mode

In this way you can limit the input filed.

Happy Reading 🦄 🦄 🦁 ❤️


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK