How to add limit on input using Vue Js
Snehal Rajeev Moon
Posted on October 14, 2021
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>
In this way you can limit the input filed.
Happy Reading 🦄 🦄 🦁 ❤️
💖 💪 🙅 🚩
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
beginners Loading more Data when user hits the page's bottom in Vue / Quasar Using a Component
June 16, 2020