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>

相关推荐
一撮不知名的呆毛8 分钟前
Ajax局部刷新,异步请求
前端·javascript·ajax
好奇的菜鸟39 分钟前
Vue.js 中 v-bind 和 v-model 的用法与异同
前端·javascript·vue.js
-代号95271 小时前
【React】一、JSX的使用
前端·react.js·前端框架
uhakadotcom2 小时前
AI搜索引擎的尽头是电商?从perplexity开始卖货说起...
前端·人工智能·后端
selfsuer2 小时前
Element-plus 【el-input输入框】和【el-select下拉选择框】样式修改
前端·javascript·vue.js
咔叽布吉3 小时前
【前端学习笔记】ES6 新特性
前端·笔记·学习
推开世界的门4 小时前
web 中 canvas 污染 以及解决方案
前端
星离~4 小时前
css—轮播图实现
前端·css
龙雨LongYu124 小时前
vue3+ts 我写了一个跟swagger.yml生成请求和响应实体(接口)
前端·vue.js·typescript
Stanford_11065 小时前
关于IDE的相关知识之一【使用技巧】
前端·ide·windows·微信小程序·微信公众平台·twitter·微信开放平台