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

Question

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

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

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

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

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

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

打扰了，望各位前辈指教！

Answer 1

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

Answer 2

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

Answer 3

加个v-if

Answer 4

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

Answer 5

加一个if判断

Answer 6

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

Answer 7

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