Input field not getting updated on paste in vue/buefy

Question

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?

Answer 1

Fixed the issue by adding a ref attribute and calling the updateValue function of BInput

(this.$refs as any).autoHuisnummer.updateValue(this.adres.huisnummer);