在開發(fā)小程序的時候,經(jīng)常遇到vue頁面通過JS代碼更新頁面數(shù)據(jù)的時候,頁面上的數(shù)據(jù)并沒有更新過來,特別是使用uni-app,經(jīng)過多次測試,得出如下結(jié)論
1、當(dāng)頁面中的參數(shù)類型為json格式時,如果參數(shù)的索引鍵為數(shù)字,可能會出現(xiàn)頁面數(shù)據(jù)不更新,如下:
data() {
return {
orderList:{},
}
}
大部分情況下,orderList參數(shù)的值可能是通過ajax遠(yuǎn)程獲取的服務(wù)器上的數(shù)據(jù),如果服務(wù)器上返回的數(shù)據(jù)是這樣的{"3":{"title":"標(biāo)題1"},"6":{"title":"標(biāo)題2"}},此時,如果在頁面中通過orderList[3]['title']="新標(biāo)題1",就會出現(xiàn)頁面數(shù)據(jù)不更新的情況,解決的辦法,將參數(shù)類型設(shè)置為數(shù)組,如:orderlist:[]
2、向頁面中的json參數(shù)追加字段時,如下:
data() {
return {
goodsList:{},
}
}
假如服務(wù)端返回的數(shù)據(jù)是[{"itemID":1,"title":"標(biāo)題1"},{"itemID"2,"title":"標(biāo)題2"}],在程序中直接通過JS追加字段,如:goodsList[1]['active']=1,這種情況下,頁面中對active顯示處理時,可能會出現(xiàn)不更新的情況,解決的辦法是在獲取到服務(wù)端返回數(shù)據(jù)時,對數(shù)據(jù)進(jìn)行處理,先將active字段寫入,后面再通過JS修改數(shù)據(jù)時,就沒問題