# vue/no-confusing-v-for-v-if
disallow confusing
v-forandv-ifon the same element
- ⚠️ This rule was deprecated and replaced by vue/no-use-v-if-with-v-for rule.
# 📖 Rule Details
This rule reports the elements which have both v-for and v-if directives in the following cases:
- The
v-ifdirective does not use the reference which is to the variables which are defined by thev-fordirectives.
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>
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.
https://v3.vuejs.org/guide/list.html#v-for-with-v-if (opens new window)
# 🔧 Options
Nothing.
# 📚 Further Reading
- Style guide - Avoid v-if with v-for (opens new window)
- Guide - Conditional Rendering / v-if with v-for (opens new window)
- Guide - List Rendering / v-for with v-if (opens new window)
# 🚀 Version
This rule was introduced in eslint-plugin-vue v3.0.0