请问在vue中,遇到拿到数据之前,dom提前渲染数据导致报错,这种问题可以怎么解决?

bug之所措
  • 347

各位前辈好,最近在写vue的时候遇到一个难以解决的问题,是这样的

数据是通过调用api,然后赋值给我的变量

clipboard.png

然后通过模板渲染,此时是没问题的,但是!!

clipboard.png

我遍历数据的数组,它里面有一个数组,但是我像上面这样写的话,控制台会报错!

clipboard.png

我问过其他人,他们是说数据在请求拿到之前,dom已经开始渲染数据了,导致后面的item.artists[0].name这句话会报错,我不确定到底是这个,还是前面的item.name,,

总之就是拿到数据之前,已经渲染数据,导致报错,我想知道怎么延迟渲染!!!???怎么确保拿到数据之后再渲染!!??

打扰了,望各位前辈指教!

评论
阅读 1.8k
7 个回答

你给searchResult初始化一个值比如[{name:'',artist:'',...}],没返回数据就渲染这个初始值,这个过程很快,基本上察觉不出来

报错不是说的很清楚吗。item.artists[0] undefined了。

可以这样写:
{{item.artists&&item.artists[0].name}}

加一个if判断

看下这个方法 Vue.nextTick( [callback, context] )
// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
// DOM 更新了
})
这个方法就是防止这种情况的

先用v-if将标签隐藏,请求返回后再将v-if中的值置为真值

撰写回答

登录后参与交流、获取后续更新提醒

宣传栏