Vue中v-for与v-if混用报[vue/no-use-v-if-with-v-for]错误如何解决？

安全阿岳

2026-9-25

报错原因

该报错是Vue官方ESLint规则vue/no-use-v-if-with-v-for的触发提示：

Vue中同一元素上v-for优先级高于v-if，原有写法会先遍历整个permission数组，再逐个判断条件，哪怕大部分项都不满足menuItem.read要求也要全部遍历，存在不必要的性能损耗
禁止将数组过滤、非空判断的逻辑和循环逻辑混写在模板中，不符合关注点分离的开发规范

修复方案

步骤1：新增计算属性过滤合法菜单项

在组件的computed配置中新增过滤逻辑，提前筛选出read为true的菜单项，计算属性自带缓存，仅当permission发生变化时才会重新计算：

// 组件script部分
export default {
  // 其他配置项省略
  computed: {
    validMenuList() {
      return this.permission.filter(menuItem => menuItem.read)
    }
  }
}

步骤2：修改模板代码

将原有的v-if拆分：把permission.length非空判断移到父级ul元素上，循环时直接使用过滤后的计算属性，不再在li元素上写判断逻辑：

<div class="_1side_menu_list">
  <ul class="_1side_menu_list_ul" v-if="permission.length">
    <li v-for="(menuItem, i) in validMenuList" :key="i">
      <router-link :to="'/'+menuItem.name"><Icon type="ios-speedometer" /> {{menuItem.resourceName}}</router-link>
    </li>
    <li><a href="/logout"><Icon type="ios-speedometer" /> Logout</a></li>
  </ul>
  <!-- 可选：permission为空时的兜底展示 -->
  <div v-else>
    暂无可用菜单权限
  </div>
</div>