Why is the vue data update view not updated in real time?

Environment

vue + elemntUI

related codes

https://codepen.io/eeeecw/pen...

specific situation

in the change event of the input box, I modified the two-way help value of the input box, but it is not always displayed in the input box.
for example, in the above code, the input box does not support decimals. After each input, I will convert the number to an integer in the change event, but the displayed value is still the original value
. But if you write a setTimeout in the change event to convert the number to an integer, you will successfully render the latest value. No, no, no.
Why is this? Seek the principle? Or is there a better solution?

Vue.js javascript
May.15,2022

the initial value of num1 should be 1. After you enter 1.3655, whether it is calculated by Math.floor (this.value.num1) or num1 or 1the watch inside the el-input-number does not listen for any change. The code related to el-input-number is as follows: 

  watch: {
    value: {
      immediate: true,
      handler: function handler(value) {
        var newVal = value === undefined ? value : Number(value);
        if (newVal !== undefined) {
          if (isNaN(newVal)) {
            return;
          }
          if (this.precision !== undefined) {
            newVal = this.toPrecision(newVal, this.precision);
          }
        }
        if (newVal >= this.max) newVal = this.max;
        if (newVal <= this.min) newVal = this.min;
        this.currentValue = newVal;
        this.$emit('input', newVal);
      }
    }
  },

do not use @ change
change to @ input

suggest computed

you can update it in real time using the following methods. For reasons, please refer to ide/reactivity.html-sharp%E5%BC%82%E6%AD%A5%E6%9B%B4%E6%96%B0%E9%98%9F%E5%88%97" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/guide...

. 
this.$nextTick(function () {
    this.value.num1 = Math.floor(this.value.num1)
})

Previous: Which custom scroll bar plug-in works?

Next: How to run the web service written by microhttpd in the background?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu