element?ui的el-input-number修改數值失效怎么解決

這篇文章主要介紹了element ui的el-input-number修改數值失效怎么解決的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇element ui的el-input-number修改數值失效怎么解決文章都會有所收獲，下面我們一起來看看吧。

element ui的el-input-number修改數值失效

問題代碼

目的：實現去掉小數位。

<el-input-number v-model="cycle" @change="vaidateCycle" :min="1" :max="3600"></el-input-number>
vaidateCycle () {
    let re = /^[0-9]+$/
    if (!re.test(this.cycle)) {
        this.$message.error('請輸入1~3600之間的正整數！')
        this.cycle = parseInt(this.cycle)
    }
}

當在輸入框輸入12.3時，光標移開觸發change事件，輸入框的值會變成12；

再次反復操作，輸入12.3，光標移開觸發change事件，輸入框的值仍然是12.3；

總之輸入框能不能祛除小數位不可控。

解決辦法

只需使用$nextTick函數，改為如下即可：

<el-input-number v-model="cycle" @change="vaidateCycle" :min="1" :max="3600"></el-input-number>
vaidateCycle () {
    let re = /^[0-9]+$/
    if (!re.test(this.cycle)) {
        this.$message.error('請輸入1~3600之間的正整數！')
        this.$nextTick(() => {
            this.cycle = parseInt(this.cycle)
        })
    }
}

分析說明

el-input-number是element的一個組件，并非簡單的標簽，而change事件監聽的是整個組件。

也就是說，光標移開觸發change事件，此時cycle值為12.3，馬上觸發dom更新。

此時修改了cycle的值，祛除了小數位。（當前組件已經被監測到變化，已經觸發了重新渲染dom，此時再修改并不會再次渲染dom。）

導致dom更新在前，cycle的值取整操作在后，并且此后無刷新控制dom重新渲染的指令。

所以dom上掛載顯示的值仍然是12.3，但是console.log(this.cycle)的值為12。

此時需要用到$nextTick函數，即在dom初次完成渲染掛載后，修改其值再次觸發dom渲染掛載。

官方資料

異步更新隊列：

可能你還沒有注意到，Vue 異步執行 DOM 更新。只要觀察到數據變化，Vue 將開啟一個隊列，并緩沖在同一事件循環中發生的所有數據改變。

如果同一個 watcher 被多次觸發，只會被推入到隊列中一次。

這種在緩沖時去除重復數據對于避免不必要的計算和 DOM 操作是非常重要的。

然后，在下一個的事件循環“tick”中，Vue 刷新隊列并執行實際 (已去重的) 工作。Vue 在內部嘗試對異步隊列使用原生的 Promise.then 和 MessageChannel，如果執行環境不支持，會采用 setTimeout(fn, 0) 代替。

需要用的$nextTick()的情況：

1、你在Vue生命周期的created()鉤子函數進行的DOM操作一定要放在Vue.nextTick()的回調函數中。原因是什么呢，原因是在created()鉤子函數執行的時候DOM 其實并未進行任何渲染，而此時進行DOM操作無異于徒勞，所以此處一定要將DOM操作的js代碼放進Vue.nextTick()的回調函數中。與之對應的就是mounted鉤子函數，因為該鉤子函數執行時所有的DOM掛載和渲染都已完成，此時在該鉤子函數中進行任何DOM操作都不會有問題 。

2、在數據變化后要執行的某個操作，而這個操作需要使用隨數據改變而改變的DOM結構的時候，這個操作都應該放進Vue.nextTick()的回調函數中。

最新說明

目前element更新到2.13.2版本可以通過“precision數值精度”去控制了。

<el-input-number size="mini" class="just-full-width" v-model="cycle" :min="1" :max="3600" :precision="0"></el-input-number>

但是有個弊端，就沒有填錯的提示了…

el-input-number組件無法修改默認值為空

<el-input-number v-model="num"  :min="1" :max="10" label="描述文字"></el-input-number>

當num設置為 null 或者 ""  都不能將輸入框的值變為空

后來發現 將num 設置為  undefined

關于“element ui的el-input-number修改數值失效怎么解決”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“element ui的el-input-number修改數值失效怎么解決”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。