no-use-v-else-with-v-for.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/no-use-v-else-with-v-for	disallow using `v-else-if`/`v-else` on the same element as `v-for`	v9.16.0

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>

🔧 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