valid-each-key.md

pageClass	sidebarDepth	title	description	since
rule-details	0	svelte/valid-each-key	enforce keys to use variables defined in the `{#each}` block	v2.28.0

svelte/valid-each-key

enforce keys to use variables defined in the {#each} block

📖 Rule Details

This rule reports that {#each} block keys does not use the variables which are defined by the {#each} block.

<script>
  /* eslint svelte/valid-each-key: "error" */

  let things = [
    { id: 1, name: 'apple' },
    { id: 2, name: 'banana' },
    { id: 3, name: 'carrot' },
    { id: 4, name: 'doughnut' },
    { id: 5, name: 'egg' }
  ];
  let foo = 42;
</script>

<!-- ✓ GOOD -->
{#each things as thing (thing.id)}
  <Thing name={thing.name} />
{/each}

<!-- ✗ BAD -->
{#each things as thing (foo)}
  <Thing name={thing.name} />
{/each}

🔧 Options

Nothing.

👫 Related Rules

• svelte/require-each-key

📚 Further Reading

• Svelte - Tutorial > 4. Logic / Keyed each blocks

🚀 Version

This rule was introduced in eslint-plugin-svelte v2.28.0

🔍 Implementation

• Rule source
• Test source