v-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-if directives in the following cases:
v-ifdirective does not use the reference which is to the variables which are defined by the
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>
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.
# 🔧 Options
# 📚 Further Reading
- Style guide - Avoid v-if with v-for
- Guide - Conditional Rendering / v-if with v-for
- Guide - List Rendering / v-for with v-if