Instead of restricting users from entering invalid data, the key is to inform them why it's invalid when it occurs. The fundamental idea behind this approach is to treat users with utmost respect by not limiting their actions through restrictions like disallowing typing.
In your case, you can use the max attribute to handle validation:
<b-form-input
type="number"
v-model="number"
max="999"
@input="getPeople(number)" />
If you need more customized control over the validation message display and triggering validation events, consider using a validation plugin as outlined in BootstrapVue's documentation.
Note that adjusting the markup to comply with the preferred validation plugin's specifications will be necessary.
If you or your client insist on calling preventDefault() on the input event, check out the information provided in BV documentation:
You can access the native input and change events using the .native modifier.
To achieve this, apply the .native modifier to get the native event as a parameter. Otherwise, only the value will be obtained.
<b-form-input
type="number"
v-model="number"
@input.native="getPeople" />
Then update the getPeople method:
methods: {
getPeople(event) {
if (event.target.value >= 1e3) {
event.preventDefault();
this.number = 999;
}
}
}
See an example in action:
let memory = 0;
new Vue({
el: '#app',
data: () => ({
number: 0
}),
methods: {
getPeople(event) {
if (event.target.value >= 1e3) {
event.preventDefault();
this.number = memory;
} else {
memory = event.target.value;
}
}
}
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver"></script>
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<div id="app" class="m-5">
<b-form-input type="number" v-model="number" @input.native="getPeople" />
</div>