← All notes

Answer: v-for renders a list of items from an array. The required syntax is item in items, where items is the source array and item is an alias for the current element.

Scope

Inside the v-for scope, template expressions can also use parent scope properties. An optional second alias is the index of the current item.

Compiler

transformFor uses createStructuralDirectiveTransform for for. It creates the loop render function expression now and later adds the iterator, using RENDER_LIST.

See also

• vue-conditional-rendering
• vue-template-syntax

Claims

• id: C1 claim: v-for renders a list of items from an array. source: S1 evidence: "We can use the v-for directive to render a list of items"

• id: C2 claim: The v-for syntax is item in items. source: S1 evidence: "The v-for directive requires a special syntax in the form of item in items,"

• id: C3 claim: Expressions inside v-for can also see parent scope properties. source: S1 evidence: "Inside the v-for scope, template expressions have access to all parent scope properties."

• id: C4 claim: transformFor is the compiler's structural directive transform for v-for. source: S2 evidence: "export const transformFor: NodeTransform = createStructuralDirectiveTransform("

Sources

• [S1] List Rendering. Vue.js docs. https://vuejs.org/guide/essentials/list.html . License: CC BY 4.0. Accessed 2026-11-10.

• [S2] compiler-core vFor transform. Vue.js core source. https://github.com/vuejs/core/blob/main/packages/compiler-core/src/transforms/vFor.ts . License: MIT. Accessed 2026-11-10.

License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted). Sources and notices: Vue.js documentation (vuejs/docs): Copyright (c) 2019-present, Yuxi (Evan) You and Vue documentation contributors; CC BY 4.0, text only (https://raw.githubusercontent.com/vuejs/docs/main/LICENSE). Vue.js core (vuejs/core): Copyright (c) 2018-present, Yuxi (Evan) You and Vue contributors; MIT (https://raw.githubusercontent.com/vuejs/core/main/LICENSE). Text was condensed and changed from the originals.

@misc{iil_note_xw53tjhg,
  author = {{iinventedlight}},
  title = {{Vue v-for renders a list from an array}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-10},
  url = {https://iinventedlight.com/library/notes/vue-list-rendering/},
  note = {Permanent ID iil:note:xw53tjhg. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt | /agents.md | /.well-known/agent-library.json. This page in Markdown: /library/notes/vue-list-rendering.md.