问题描述:在使用v-for循环页面渲染时,同时获取渲染元素是为null。
原因:v-for未渲染完成。
解决方法一:
- 利用wacth+this.$nextTick方式解决
- wacth 监听某一个data数据发生变化就执行方法
- nextTick:在下次DOM更新循环结束之后执行回调
<template>
<div v-for="(tiem,index) in test" :key="index"></div>
</template>
<script>
export default {
data(){
return{
test:[]
}
},
watch:{
test(){
this.$nextTick(()=>{
console.log("v-for渲染完成,可通过回调函数执行操作")
})
}
},
mounted(){
this.$axios({
mounteds:'get',
url:''
}).then((response)=>{
this.test = response;
})
}
}
</script>
解决方法二:
- 在回调方法中调用一次性定时器
- 利用定时器预留出页面的渲染时间,在执行方法.
<template>
<div v-for="(tiem,index) in test" :key="index"></div>
</template>
<script>
export default {
data:{
return:{
test:[]
}
},
mounted(){
this.$axios({
mounteds:'get',
url:''
}).then((response)=>{
this.test = response;
this.testFun()
})
},
methods:{
testFun(){
setTimeout(()=>{
console.log('预留方法调用的时间,等v-for渲染完成在执行')
},2000)
}
}
}
</script>