Vue vue/cli3 与 vue/cli4 v-for 和 v-if 一起使用冲突

问题描述

异常信息: [vue/no-use-v-if-with-v-for]
The 'this.$router.options.routers' expression inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.eslint-plugin-vue ,如下图:

原因分析:

error The 'this.$router.options.routes' expression inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if' vue/no-use-v-if-with-v-for

**原因:**v-for的优先级会高于v-if,因此v-if会重复运行在每个v-for中。

解决方法

将v-for用template标签进行包裹即可,因在该标签无特殊含义,代码如下:

<el-menu router>

<template v-for="(item,index) in this.$router.options.routers" >

<el-submenu index="1"

:key="index"

v-if="!item.hidden">

<template slot="title">

<i class="el-icon-location"></i>

<span>{{item.name}}</span>

</template>

<el-menu-item

:index="children.path"

v-for="(children,index) in item.children"

:key="index">{{children.name}}</el-menu-item>

</el-submenu>

</template>

</el-menu>

上面代码为vue/cli4中写法,貌似vue/cli3中可以直接像下面这样写:

<el-menu router>

<el-submenu index="1"

v-for="(item,index) in this.$router.options.routers"

:key="index"

v-if="!item.hidden">

<template slot="title">

<i class="el-icon-location"></i>

<span>{{item.name}}</span>

</template>

<el-menu-item

:index="children.path"

v-for="(children,index) in item.children"

:key="index">{{children.name}}</el-menu-item>

</el-submenu>

相关推荐
小桥风满袖1 小时前
极简三分钟ES6 - ES9中对象扩展
前端·javascript
云舟吖1 小时前
基于 electron-vite 实现一个 RPA 网页自动化工具
前端·架构
用户9481817675442 小时前
超越NAT:如何构建高效、安全的内网穿透隧道
前端
明天的明2 小时前
vue双向数据绑定失效
前端
bug_kada2 小时前
前端路由:深入理解History模式
前端·面试
LIUENG2 小时前
快速开发一个 VSCode 插件
前端·visual studio code
bug_kada2 小时前
前端路由:Hash vs History,一篇讲明白!
前端·面试
城中的雾2 小时前
HarmonyOS应用拉起系列(三):如何直接拉起腾讯/百度/高德地图进行导航
前端·javascript·harmonyos
李明卫杭州2 小时前
CSS 中 nth-child 选择器的详细用法和示例
前端
会豪2 小时前
CSS 动画属性精讲:从基础到实战
前端·css