🎈博客主页:🌈我的主页🌈
🎈欢迎点赞 👍 收藏 🌟留言 📝 欢迎讨论!👏
🎈本文由 【泠青沼~】 原创,首发于 CSDN🚩🚩🚩
🎈由于博主是在学小白一枚,难免会有错误,有任何问题欢迎评论区留言指出,感激不尽!🌠个人主页
🌟 一、避免 v-if 和 v-for 一起使用
永远不要把 v-if 和 v-for 同时用在同一个元素上
一般我们在两种常见的情况下会倾向于这样做:
- 为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)
在这种情形下,请将 users 替换为一个计算属性 (比如 activeUsers),让其返回过滤后的列表。
- 为了避免渲染本应该被隐藏的列表 (比如 v-for=“user in users” v-if=“shouldShowUsers”)
这种情形下,请将 v-if 移动至容器元素上
🌟 二、优先级
当 v-if 与 v-for 一起使用时,v-if 具有比 v-for 更高的优先级
<el-sub-menu index="1" v-for="(item,index) in this.$router.options.routes" v-if="!item.hidden" :key="index">
<template #title >
<el-icon><Location/></el-icon>
<span>{{item.name}}</span>
</template>
<el-menu-item :key="index" :index="child.path" v-for="(child,index) in item.children">{{child.name}}</el-menu-item>
</el-sub-menu>
同时使用v-if和v-for就会使得item元素还有进行渲染,就进行了if判断语句,导致item元素被判定为未定义,然后报错
Property "item" was accessed
🌟 二、解决方法
- 过滤一个列表中的项目,将if中的条件用来过滤数组或对象,替换为一个计算属性,让其返回过滤后的数组或对象
- v-if 移动至容器元素上
- 可以使用v-show来代替(视情况而定)