[Vuejs]-Bootstrap Vue: v-model is acting weird

by

1👍

✅

The issue you’re seeing is a side-effect of Vue’s reactivity system. When you’re watching a property with a watcher, if you change the value of the property inside the watcher, it can cause the watcher to run again. This is because changing the property value causes Vue’s reactivity system to trigger the watcher.

When you set this.barcodeText = '' inside the watcher, it can cause the watcher to run again before the DOM has updated. This means this.barcodeText could still have its old value when the watcher runs again. This can lead to unpredictable behavior.

A solution is to use Vue.nextTick(), which can be used to delay the reset of the barcodeText until after the next DOM update cycle. Here’s how you can do it:

watch: {
  barcodeText(newVal, oldVal) {
    if (newVal.length === 1 && newVal !== "I") {
      console.log(this.barcodeText);          
      this.$nextTick(() => { this.barcodeText = ''; });
    }
    if (newVal.length >= 9) {
      console.log(this.barcodeText);
      this.$nextTick(() => { this.barcodeText = ''; });
    }
  }
}

The Vue.nextTick() function is used to defer the execution of a function until the next DOM update cycle completes. It takes a callback function as an argument, and runs that function after the next DOM update cycle.

By wrapping the this.barcodeText = '' in a Vue.nextTick(), you’re telling Vue to wait until after the current round of data changes have been processed and the DOM has been updated before it resets barcodeText. This should resolve the issue you’re seeing.

or

you can use setTimeout() to add a small delay, this is my way (it’s a bad practice I guess) and its not a good way most of the time, you are guessing the time it takes to update in this case

👤No One

Leave a comment