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的值,这是代码运行后的界面:
uview的Collapse的动态刷新问题_第1张图片
可以看到v-forp标签并没有显示出来。

直接上解决后的代码:

  • 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>

修改之后,界面上就显示出来了:
uview的Collapse的动态刷新问题_第2张图片
就是在下一次页面刷新(nextTick)时,调用了collapse组件本身的init()方法。
当然,你还可以通过v-if来达到相同的效果,没有数据的时候不展示,数据获取并赋值完毕后,进行展示。

你可能感兴趣的:(微信小程序,小程序,vue)