简单的说就是通过网络请求、延时等异步操作获取数据后,数据不会展示出来,我先来重现一下:
html部分
<template>
<view>
<u-collapse>
<u-collapse-item title="下面循环的数据展示不出来" open>
<p>写死的p标签</p>
<p v-for="(item,index) in testData" :key="index">{{`p标签循环${item}`}}</p>
</u-collapse-item>
</u-collapse>
</view>
</template>
JS部分
<script>
export default {
data() {
return {
testData:[]
}
},
onLoad() {
setTimeout(()=> {
this.testData = ['一','二']
},1000)
}
}
</script>
可以看到,我去延时设置了testData
的值,这是代码运行后的界面:
可以看到v-for
的p标签
并没有显示出来。
直接上解决后的代码:
html部分
<template>
<view>
<u-collapse ref="collapse">
<u-collapse-item title="下面循环的数据展示不出来" open>
<p>写死的p标签</p>
<p v-for="(item,index) in testData" :key="index">{{`p标签循环${item}`}}</p>
</u-collapse-item>
</u-collapse>
</view>
</template>
JS部分
<script>
export default {
data() {
return {
testData:[]
}
},
onLoad() {
setTimeout(()=> {
this.testData = ['一','二']
this.$nextTick(() => {
this.$refs.collapse.init()
})
},1000)
}
}
</script>
修改之后,界面上就显示出来了:
就是在下一次页面刷新(nextTick)时,调用了collapse组件
本身的init()
方法。
当然,你还可以通过v-if
来达到相同的效果,没有数据的时候不展示,数据获取并赋值完毕后,进行展示。