Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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:

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)
  1. Add this vue component somewhere (doesn’t matter where):
  <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>
  export default {
    name: "requestPage",
      return {
        formValid: false,
        levelid: ''
    methods: {
        this.formValid = +this.levelid > 100 && +this.levelid < 100000000
  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)

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:5

github_iconTop GitHub Comments

VividLemoncommented, Aug 29, 2022

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

KriseevMcommented, Aug 27, 2022

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


Usually this is how vue works. To fix:


    nextTick(async () => {
        //wait for v-model to update
        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

Read more comments on GitHub >

github_iconTop Results From Across the Web

How should I use v-model and v-on:change for an input select ...
It seems to be a problem with the component. It would happen because change event is firing before the event which is responsible...
Read more >
vmodel changes do not trigger "change" event in text-input ...
I would expect changes to the value to trigger a change on the input, which should update the "not-empty-state" class accordingly. Right now, ......
Read more >
Form Input Bindings - Vue.js
v -model will ignore the initial value , checked or selected attributes found on any form elements. It will always treat the current...
Read more >
Inputs — Essentials ⚡️ FormKit — Vue Forms, Supercharged
FormKit ships with turbocharged inputs for developing production-ready forms ... value prop, v-model , or node.input() ) to set the value of the...
Read more >
Using v-model for Two-Way Binding in Vue.js | DigitalOcean
To bind the value of an input element to a property of your component's data, use v-model="dataProperty" like so.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found