问题代码
<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,否则将获取不到,至于延迟多少,看自己的业务情况,这里只是给出问题所在及对应的解决方法。