This content originally appeared on DEV Community and was authored by Snehal
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>
In this way you can limit the input filed.
Happy Reading 🦄 🦄 🦁 ❤️
This content originally appeared on DEV Community and was authored by Snehal
Snehal | Sciencx (2021-10-14T17:32:08+00:00) How to add limit on input using Vue Js. Retrieved from https://www.scien.cx/2021/10/14/how-to-add-limit-on-input-using-vue-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.