記一次工作中vue中mounted請求接口返回值和vue的data域中屬性不一致的后果


記一次工作中vue中mounted請求接口返回值和vue的data域中屬性不一致的坑

當時需求:就是當時在這個頁面中,就是本次補差余額只要變化,就會顯示當前的時間。

當時處理的是使用change方法監聽這個輸入框的變化(其實也可以使用watch):

但是在調試的時候竟然出現:說我的這個bcbcsj沒有定義(undefined)

實際上在我的data域中已經定義過了:

這就讓人感覺有點莫名其妙了,問題出現。

首先排查思路:

給data域名中bcbcsj復制初始化2222,發現其一閃而過,然后又為空值了,沒道理,怎么會這樣。經排查,原來data數據域一開始加載是有2222的,但是在mountd初始化時候,調用了后台的接口,接口返回值確實沒有這個bcbcsj這個字段,這就造成了一開始data域初始化出現2222,但是后面在mounted初始化時候,從后端返回的接口賦值的時候,把他覆蓋掉了。所以這樣的話,會造成數據讀取不到的問題,所以data數據域的屬性最好還是要和mounted接口里面返回的字段屬性一致,不然可能出現屬性覆蓋的問題。

解決辦法:

1:mounted接口里面返回的屬性值和data域屬性值保持一致

2:也可以使用Vue.set( target, propertyName/index, value ),下面是vue官網,這樣也可以給其賦值,不至於被后端接口給覆蓋掉。

(https://cn.vuejs.org/v2/api/#Vue-set)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM