Skip to content


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.

Now loading...


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

🚀 Version

This rule was introduced in eslint-plugin-vue v3.0.0

🔍 Implementation