I have an input field for numbers and I only want to be able to insert numbers starting from 1. Which I am able to achieve with type=number and min=1 but this doesnt stop pasteing "-1" into the field. Changing the model, does not change whats on screen in the input field.
This is the field:
<b-input
v-model.number="housenumber"
type="number"
min="1"
v-cleave="cleaveRules.number"
data-automation-name="housenumberAuto"
placeholder="1"
class="width-extrasmall .no-controls-number"
maxlength="5"
:has-counter="false"
@change.native="saveAdres"
@paste.native="onPaste"
/>
</b-field>
What I tried is triggering the paste/blur event and setting the model by using Math.abs on the value. Like this:
onPaste () {
this.housenumber = Math.abs(this.housenumber as number);
},
Console shows that "this.housenumber" contains the desired value.
In the case of "-1" it becomes "1" but the UI still shows "-1".
Using the Vue developer tools I can see that the data in the BInput field has "newValue: -1". Do I need to change that somehow?
Fixed the issue by adding a ref attribute and calling the updateValue function of BInput
(this.$refs as any).autoHuisnummer.updateValue(this.adres.huisnummer);