在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基于better-scroll实现左右联动滑动页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
vite+vue3+tsx项目打包后动态路由无法加载页面的问题及解决
这篇文章主要介绍了vite+vue3+tsx项目打包后动态路由无法加载页面的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue+relation-graph绘制关系图实用组件操作方法
这篇文章主要介绍了vue+relation-graph绘制关系图实用组件操作方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
这篇文章主要给大家介绍了关于Vue中forEach()使用方法的相关资料,forEach和map是数组的两个方法,作用都是遍历数组,在vue项目的处理数据中经常会用到,需要的朋友可以参考下2023-09-09
这篇文章主要和大家一起探索Vue.js component内容实现,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
unplugin-svg-component优雅使用svg图标指南
这篇文章主要为大家介绍了unplugin-svg-component优雅使用svg图标指南，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了vue实现微信获取用户信息的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
详解vue3.0 的 Composition API 的一种使用方法
这篇文章主要介绍了vue3.0 的 Composition API 的一种使用方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
Vue3使用vant检索组件van-search遇到的问题小结
当清空按钮与检索按钮同时居右时,点击clear清空按钮事件时会同时触发click-right-icon事件,这个时候容易触发一系列问题,小编小编给大家分享Vue3使用vant检索组件van-search遇到的问题小结,感兴趣的朋友一起看看吧2024-02-02
本篇文章主要介绍了Vue打包后出现一些map文件的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
最新评论