v-if-else-key.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/v-if-else-key	require key attribute for conditionally rendered repeated components	v9.19.0

vue/v-if-else-key

require key attribute for conditionally rendered repeated components

• 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 Rule Details

This rule checks for components that are both repeated and conditionally rendered within the same scope. If such a component is found, the rule then checks for the presence of a 'key' directive. If the 'key' directive is missing, the rule issues a warning and offers a fix.

This rule is not required in Vue 3, as the key is automatically assigned to the elements.

<template>
  <!-- ✓ GOOD -->
  <my-component v-if="condition1" :key="one" />
  <my-component v-else-if="condition2" :key="two" />
  <my-component v-else :key="three" />

  <!-- ✗ BAD -->
  <my-component v-if="condition1" />
  <my-component v-else-if="condition2" />
  <my-component v-else />
</template>

🔧 Options

Nothing.

👫 Related Rules

• vue/require-v-for-key

📚 Further Reading

• Guide (for v2) - v-if without key

🚀 Version

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

🔍 Implementation

• Rule source
• Test source