v-for-delimiter-style.md

Pattern: Inconsistent v-for delimiter style

Issue: -

Description

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

• eslint-plugin-vue - v-for-delimiter-style
• Guide - List Rendering