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>

相关推荐
kakacc:1 分钟前
SpringBoot+Hutool+Vue实现导出
java·vue.js·spring boot
勤劳打代码34 分钟前
妙笔生花 —— Flutter 实现飞入动画
前端·flutter·设计模式
银安41 分钟前
CSS排版布局篇(4):浮动(float)、定位(position) 、层叠(Stacking)
前端·css
昭昭日月明43 分钟前
mac 效率工具:Raycast 的扩展开发
前端·mac·设计
white-persist1 小时前
XXE 注入漏洞全解析:从原理到实战
开发语言·前端·网络·安全·web安全·网络安全·信息可视化
练习时长一年1 小时前
Spring内置功能
java·前端·spring
SHUIPING_YANG1 小时前
完美迁移:将 nvm 和 npm 完全安装到 Windows D 盘
前端·windows·npm
lypzcgf2 小时前
Coze源码分析-资源库-编辑数据库-前端源码-核心组件
前端·数据库·源码分析·coze·coze源码分析·ai应用平台·agent平台
勤奋菲菲2 小时前
Koa.js 完全指南:下一代 Node.js Web 框架
前端·javascript·node.js