v-for-delimiter-style.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/v-for-delimiter-style	enforce `v-for` directive's delimiter style	v7.0.0

vue/v-for-delimiter-style

enforce v-for directive's delimiter style

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

📖 Rule Details

This rule enforces which delimiter (in or of) should be used in v-for directives.

<template>
  <!-- ✓ GOOD -->
  <div v-for="x in xs" />

  <!-- ✗ BAD -->
  <div v-for="x of xs" />
</template>

🔧 Options

Default is set to in.

{
  "vue/v-for-delimiter-style": ["error", "in" | "of"]
}

• "in" (default) ... requires using in.
• "of" ... requires using of.

"of"

<template>
  <!-- ✓ GOOD -->
  <div v-for="x of xs" />

  <!-- ✗ BAD -->
  <div v-for="x in xs" />
</template>

📚 Further Reading

• Guide - List Rendering

🚀 Version

This rule was introduced in eslint-plugin-vue v7.0.0

🔍 Implementation

• Rule source
• Test source