記一次工作中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官網,這樣也可以給其賦值,不至於被后端接口給覆蓋掉。