[vue3]router-link和v-for使⽤产⽣的问题记录⼀个RouterLink，V-for，v-if同时使⽤的问题
可能的警告
Unhandled error during execution of render function
Unhandled error during execution of scheduler flush. This is likely a Vue internals bug.
点击跳转后显⽰的错误
Uncaught (in promise) TypeError: Cannot destructure property 'type' of 'vnode' as it is null.
起因
想要实现如下的结构转换，即每⾏外⾯再套⼀层容器来限制⾏内图⽚的数量
react router 和vue router原代码
<div class = 'home'>
<div class="pics">
<template v-for="(item,index) of ImgUrls" :key = "index">
<router-link class="oneTip" to="">
<img :src="item[0]" alt="">
<span>{{item[1]}}</span>
</router-link>
</template>
</div>
</div>
修改后的理想代码
<div class = 'home'>
<div class="pics">
<template v-for="(item,index) of ImgUrls" :key = "index">
<div v-for="num of 3" v-if="index%3===0">
<router-link class="oneTip" to="">
<img :src="ImgUrls[index-1+num][0]" alt="">
<span>{{ImgUrls[index-1+num][1]}}</span>
</router-link>
</div>
</template>
</div>
</div>
报错/警告：
点击链接跳转后显⽰的错误：
报错原因（菜鸟的猜测）：
RouterLink存在双重循环的时候会存在重复渲染的问题虚拟DOM不存在
v-if和v-for同时使⽤产⽣的问题
最好避免存在RouterLink的同时嵌套使⽤v-for/v-if和v-for同时使⽤

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。