pageClass: rule-details sidebarDepth: 0 title: vue/no-confusing-v-for-v-if description: disallow confusing
- This rule was and replaced by JS.VUE.NO.USE.V.IF.WITH.V.FOR rule.
This rule reports the elements which have both v-for and v-if directives in the following cases:
- The v-if directive does not use the reference which is to the variables which are defined by the v-for directives.
In that case, the v-if should be written on the wrapper element.
<template> <!-- ✓ GOOD --> <TodoItem v-for="todo in todos" v-if="todo.shown" :todo="todo" /> <ul v-if="shown"> <TodoItem v-for="todo in todos" :todo="todo" /> </ul> <!-- ✗ BAD --> <TodoItem v-if="complete" v-for="todo in todos" :todo="todo" /> </template>
::: warning Note When they exist on the same node, v-for has a higher priority than v-if. That means the v-if will be run on each iteration of the loop separately.
- Style guide - Avoid v-if with v-for
- Guide - Conditional Rendering / v-if with v-for
- Guide - List Rendering / v-for with v-if
This rule was introduced in eslint-plugin-vue v3.0.0
- Rule source
- Test source