vue/no-use-v-else-with-v-for

disallow using v-else-if/v-else on the same element as v-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>

Now loading...

🔧 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

• vue/no-use-v-if-with-v-for

🚀 Version

This rule was introduced in eslint-plugin-vue v9.16.0

🔍 Implementation

• Rule source
• Test source