vue + element-ui table表單數據綁定問題--深拷貝

table表單就是指table形式的表單,其數據結構會是一個Array,即一個字段名會出現多次的情況,數據結構如下:

對應的頁面形式如下:

這是table表單跟傳統的表單(字段名唯一)的主要區別,因此用element-ui的表單校驗時也有區別。

問題背景:

輸入比例的時候自動計算金額,輸入金額的時候自動計算比例,同時比例和金額都分別加了校驗。

當輸入比例不符合校驗規則(比如大於100,校驗規則是比例不能超過100)的時候,此時金額的校驗也應不通過(金額過大)。

出現的問題:

當輸入比例不符合校驗規則(比如大於100,校驗規則是比例不能超過100)的時候,只提示比例過大,金額沒有出現理想中的錯誤提示。

此時對金額進行調整輸入:從右往左刪掉部分位數,以達到符合校驗規則,卻發現刪除出現問題,一直按刪除鍵,金額紋絲不動,並不會改變。

經過冥思苦想及多方嘗試,最後發現是樓主計算的時候拿的table數據沒有深拷貝一下,導致數據不會發生改變。

將計算需要用到的數據用深拷貝的方式獲取,就沒問題了。如下:

 

總結:

vue具有雙向數據綁定功能,因此在對需要修改的雙向綁定數據時,請記得修改前對數據進行深拷貝,否則會出現問題。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章