vue/no-use-v-else-with-v-for
disallow using
v-else-if
/v-else
on the same element asv-for
📖 Rule Details
This rule reports elements that have both v-else-if
/v-else
and v-for
directives. That is valid in Vue (v-else-if
/v-else
will take precedence), but is confusing to read.
<template>
<!-- ✓ GOOD -->
<div v-if="foo">foo</div>
<template v-else-if="bar">
<div v-for="x in xs">{{ x }}</div>
</template>
<template v-else>
<div v-for="x in xs">{{ x }}</div>
</template>
<!-- ✗ BAD -->
<div v-if="foo">foo</div>
<div v-else-if="bar" v-for="x in xs">{{ x }}</div>
<div v-else v-for="x in xs">{{ x }}</div>
</template>
🔧 Options
Nothing.
🔇 When Not To Use It
If you don't find using v-else-if
/v-else
together with v-for
confusing to read, you can safely disable this rule.
👫 Related Rules
🚀 Version
This rule was introduced in eslint-plugin-vue v9.16.0