b-form-input v-on:input is triggered before actual nput value and v-model is changed

Describe the bug With <input> onInput event is triggered after input and v-model values are changed With <b-form-input> onInput event (v-on:input) is triggered before those values are changed

I have recorded a video for this: https://user-images.githubusercontent.com/34946346/187000396-e867e291-49f6-4c5c-9fb1-479a3527eb65.mp4

First part of video with <b-form-input>, last part with regular <input>

To Reproduce Steps to reproduce the behavior:

1. Create vue3 project with vue-cli and add bootstrap-vue-3 like this (main.js):

import { createApp } from 'vue'
import App from './App.vue'
import "bootstrap/dist/css/bootstrap.min.css"
import BootstrapVue3 from 'bootstrap-vue-3'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
const app = createApp(App)
app.use(BootstrapVue3)
app.mount('#app')

1. Add this vue component somewhere (doesn’t matter where):

<template>
  <form class="mt-4 mb-4">
        <input v-model="levelid" type="number" name="levelid" max="99999999" min="1" placeholder="12345678" id="levelid" required @input="formValueChanged" />
        <b-button :variant="formValid ? 'success' : 'outline-danger'" id="submit" squared="false">Предложить</b-button>
    </form>
</template>
<script>
  export default {
    name: "requestPage",
    data(){
      return {
        formValid: false,
        levelid: ''
      }
    },
    methods: {
      formValueChanged()
      {
        alert(this.levelid)
        this.formValid = +this.levelid > 100 && +this.levelid < 100000000
      }
    }
  }
</script>

1. run app
2. try to enter character in input

Expected behavior After I enter character it appears in the input and then alert with new input value is shown

Actual behavior After I enter character alert with old input value shows up, then character appears in input

Environment (please complete the following information):

• OS: Artix linux (openrc)
• Version 0.2.11 (from npm)

[VividLemon]

I’ll attempt to develop a fix on Monday. People shouldn’t normally need to use nextTick themselves.

It would be in line with how vue behaves, the actual values are updated before the DOM in a single tick.

Edit: The reason was because the @input was emitted before @update:modelValue

[KriseevM]

So the only issue here is that the new value should be emitted, not the old?

Yes

Usually this is how vue works. To fix:

formValueChanged()
      {

    nextTick(async () => {
        //wait for v-model to update
        alert(this.levelid)
        this.formValid = +this.levelid > 100 && +this.levelid < 100000000
})
      }

Thanks, I somehow didn’t know nextTick existed and this method fixes the issue but it’s this.$nextTick