Bootstrap

关于uni-app使用v-for绑定动态ref后无法获取的解决办法

问题代码
<view class="list" v-for="item in data" :key="item.ref">
	<myCom class="item" :ref="item.ref">{{item.ref}}</myCom>
</view>

import myCom from 'xxx.vue';
export default {
	data(){
		return {
			data: []
		}
	},
	onReady(){
		for(let i = 0; i < 3; i++){
			this.data.push({ref: 'ref' + i});
		}
		console.log(this.$refs);
	},
	components: {
		myCom
	}
}

上述代码的打印结果为一个空对象,即表示并没有获取到动态的ref元素,但如果我们将动态的ref改成静态写死的ref,又能够获取得到,所以我们可以排除是兼容性的问题,而考虑是界面元素渲染的时间问题,我们可以加上一个延迟获取

<view class="list" v-for="item in data" :key="item.ref">
	<myCom class="item" :ref="item.ref">{{item.ref}}</myCom>
</view>

import myCom from 'xxx.vue';
export default {
	data(){
		return {
			data: []
		}
	},
	onReady(){
		for(let i = 0; i < 3; i++){
			this.data.push({ref: 'ref' + i});
		}
		setTimeout(() => {
			console.log(this.$refs);
		}, 1000);
	},
	components: {
		myCom
	}
}

此时我们能够正确获取到所有的ref元素,得出结论就是,元素渲染需要时间,我们必须得等它渲染完成后才能进行获取ref,否则将获取不到,至于延迟多少,看自己的业务情况,这里只是给出问题所在及对应的解决方法。

;