在vue+element-plus中无法同时使用v-for和v-if的问题及解决方法
更新时间：2023年07月21日 09:07:19 作者：黯渊
由于路由中存在不需要遍历的数据所以像用v-if来过滤，但是报错，百度说vue不能同时使用v-if和v-for，今天小编给大家分享解决方式，感兴趣的朋友跟随小编一起看看吧
解决在vue+element-plus中无法同时使用v-for和v-if的问题
目的：
在vue中使用element-plus模板来遍历路由并显示在左侧导航栏中
问题：
由于路由中存在不需要遍历的数据所以像用v-if来过滤，但是报错，百度说vue不能同时使用v-if和v-for
解决方式：
详细请参考：文末扩展资料
computed:{
aitemList: function () {
return this.$router.options.routes.filter((item) => {
return item.hidden
})
}
}扩展资料
【vue+element-ui】v-for与v-if不能同时使用的解决方案之一
使用vue-cli脚手架搭建的项目，v-for与v-if不能同时使用，会报错
<el-submenu
index="1"
v-for="(item, index) in this.$router.options.routes"
:key="index"
v-if="!item.hidden"
>
<template slot="title"><i class="el-icon-message"></i>{{ item.name }}</template >
</el-submenu>解决方案之一：使用计算属性
<el-submenu index="1" v-for="(item, index) in aitemList" :key="index">
<template slot="title"><i class="el-icon-message"></i>{{ item.name }}</template >
</el-submenu>computed: {
aitemList: function () {
return this.$router.options.routes.filter((item) => {
return item.hidden
})
}
}到此这篇关于在vue+element-plus中无法同时使用v-for和v-if的问题及解决方法的文章就介绍到这了,更多相关vue中无法同时使用v-for和v-if内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在开发中,如果上传的文件过大,可以考虑分片上传,分片就是说将文件拆分来进行上传,将各个文件的切片传递给后台,然后后台再进行合并,这篇文章主要介绍了Vue大文件分片上传组件实现解析及关键代码的相关资料,需要的朋友可以参考下2025-09-09
文章介绍了如何在uni-app中简单封装一个无限级树形组件,该组件可以无线嵌套,展开和收缩,并获取子节点数据,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2025-01-01
在 Vue 开发中,修改了数据但界面未更新”是最令开发者头疼的问题之一,本文将从 底层源码逻辑 与 工程实践 两个维度,结合 Vue 2 与 Vue 3 的核心差异,提供系统性的解决方案,需要的朋友可以参考下2026-01-01
本文将详细介绍如何在 Vue2 项目中对 Vxe Table 进行封装,并给出实际使用示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要介绍了vue中关于confirm确认框的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-08-08
这篇文章主要为大家详细介绍了Vue实现数据请求拦截，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
最近发现很多要求Vue3的技术了,不得不说it技术的更新真的太快了,作为vue2老用户,我们在学习Vue3前应该了解他们的区别以及背后的原因,下面这篇文章主要给大家介绍了关于vue2和vue3区别的相关资料,需要的朋友可以参考下2023-02-02
关于ElementUI的el-upload组件二次封装的问题
这篇文章主要介绍了关于ElementUI的el-upload组件二次封装的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要给大家介绍了关于Vue项目中常用的工具函数,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2021-09-09
回到顶部在很多网页中都可以见到，本文主要介绍了Vue3 封装回到顶部组件的实现示例，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论