在vue+element-plus中无法同时使用v-for和v-if的问题及解决方法
作者：黯渊
由于路由中存在不需要遍历的数据所以像用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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！