# vue/no-confusing-v-for-v-if

disallow confusing v-for and v-if on the same element

# 📖 Rule Details

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>
Now loading...

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://vuejs.org/v2/guide/list.html#v-for-with-v-if

# 🔧 Options

Nothing.

# 📚 Further reading

# 🔍 Implementation

Last Updated: 12/30/2018, 3:44:02 AM