鍍金池/ 問答/Java  HTML/ 請問在vue中，遇到拿到數(shù)據(jù)之前，dom提前渲染數(shù)據(jù)導(dǎo)致報錯，這種問題可以怎么解

請問在vue中，遇到拿到數(shù)據(jù)之前，dom提前渲染數(shù)據(jù)導(dǎo)致報錯，這種問題可以怎么解決？

各位前輩好，最近在寫vue的時候遇到一個難以解決的問題，是這樣的

數(shù)據(jù)是通過調(diào)用api，然后賦值給我的變量

clipboard.png

然后通過模板渲染，此時是沒問題的，但是！！

clipboard.png

我遍歷數(shù)據(jù)的數(shù)組，它里面有一個數(shù)組，但是我像上面這樣寫的話，控制臺會報錯！

clipboard.png

我問過其他人，他們是說數(shù)據(jù)在請求拿到之前，dom已經(jīng)開始渲染數(shù)據(jù)了，導(dǎo)致后面的item.artists[0].name這句話會報錯，我不確定到底是這個，還是前面的item.name,,

總之就是拿到數(shù)據(jù)之前，已經(jīng)渲染數(shù)據(jù)，導(dǎo)致報錯，我想知道怎么延遲渲染?。。。?？？怎么確保拿到數(shù)據(jù)之后再渲染?。?？？

打擾了，望各位前輩指教！

回答
編輯回答
墨染殤

你給searchResult初始化一個值比如[{name:'',artist:'',...}],沒返回?cái)?shù)據(jù)就渲染這個初始值，這個過程很快，基本上察覺不出來

2018年6月13日 21:52
編輯回答
尕筱澄

先用v-if將標(biāo)簽隱藏，請求返回后再將v-if中的值置為真值

2018年4月11日 09:33
編輯回答
氕氘氚

加一個if判斷

2018年7月17日 17:18
編輯回答
櫻花霓

加個v-if

2017年3月6日 02:21
編輯回答
不二心

可以這樣寫：
{{item.artists&&item.artists[0].name}}

2018年1月23日 04:21
編輯回答
她愚我

報錯不是說的很清楚嗎。item.artists[0] undefined了。

2018年9月19日 06:09
編輯回答
糖豆豆

看下這個方法 Vue.nextTick( [callback, context] )
// 修改數(shù)據(jù)
vm.msg = 'Hello'
// DOM 還沒有更新
Vue.nextTick(function () {
// DOM 更新了
})
這個方法就是防止這種情況的

2018年6月10日 08:37