在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基于两个计算属性实现选中和全选功能示例
这篇文章主要介绍了vue基于两个计算属性实现选中和全选功能,结合实例形式分析了vue计算属性get及set操作页面元素实现选中与全选功能相关操作技巧,需要的朋友可以参考下
2019-02-02
解决运行vue项目内存溢出问题
这篇文章主要介绍了解决运行vue项目内存溢出问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue实现将时间戳转换成日期格式
这篇文章主要介绍了vue实现将时间戳转换成日期格式方式,具有很好的参考价值,希望对大家有所帮助,
2023-10-10
vue+echarts实现动态绘制图表及异步加载数据的方法
vue写的后台管理，需要将表格数据绘制成图表（折线图，柱状图），图表数据都是通过接口请求回来的。这篇文章主要介绍了vue+echarts 动态绘制图表及异步加载数据的相关知识,需要的朋友可以参考下
2018-10-10
vue实现文字滚动效果
这篇文章主要为大家详细介绍了vue实现文字滚动效果，公告滚动播放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
Vue.js中vue-property-decorator的使用方法详解
vue-property-decorator是一个用于在Vue.js中使用TypeScript装饰器的库,它能够简化 Vue 组件的定义,使代码更加简洁和可维护,它能够简化Vue组件的定义,使代码更加简洁和可维护,本文将深入探讨vue-property-decorator的使用方法,并展示如何在Vue.js项目中应用它
2024-08-08
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
今天小编就为大家分享一篇解决vue项目刷新后,导航菜单高亮显示的位置不对问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue路由前进后退动画效果的实现代码
这篇文章主要介绍了vue路由前进后退动画效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-12-12
el-select二次封装实现可分页加载数据的示例代码
使用el-select时一次性渲染几百条数据时会造成页面克顿, 可以通过分页来实现,所以本文给大家介绍了el-select二次封装实现可分页加载数据,文中有详细的代码讲解,具有一定的参考价值,需要的朋友可以参考下
2023-12-12
移动端底部导航固定配合vue-router实现组件切换功能
经常遇到这样的需求，移动端中的导航并不是在顶部也不是在底部，而是在最底部且是固定的，当我们点击该导航项时会切换到对应的组件。这篇文章主要介绍了移动端底部导航固定配合vue-router实现组件切换功能,需要的朋友可以参考下
2019-06-06