uview的Collapse的动态刷新问题

简单的说就是通过网络请求、延时等异步操作获取数据后，数据不会展示出来，我先来重现一下：

• 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来达到相同的效果，没有数据的时候不展示，数据获取并赋值完毕后，进行展示。