Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →

menu_book Course Curriculum (Vue 3) expand_more

SFC & Templates

Single-file components Template interpolation v-bind v-on v-if v-show v-for and keys Dynamic components

Reactivity

ref reactive computed watch watchEffect toRef toRefs shallowRef

Components

Props Prop validation Emits Slots Named slots Scoped slots provide and inject Template refs

Forms & DOM

v-model v-model modifiers Multiple v-model bindings Class binding Style binding Event modifiers Key modifiers Custom directives

Async & Routing Patterns

Async components Suspense Teleport KeepAlive Transition TransitionGroup Composables Lifecycle hooks

Production Patterns

Pinia-style store pattern Readonly state Effect scope Error captured hook Performance computed caching Lazy route concept SSR hydration concept Testing component contract

Vue 3 / SFC & Templates

v-for and keys

Learn v-for and keys in Vue 3 with a dedicated explanation, a concept-specific example, a production caution, and a mastery check.

12 min read • Beginner

vue-3-007.vue

vue

<script setup>
const items=[{id:1,name:"Mug"},{id:2,name:"Book"}]
</script>
<template><li v-for="item in items" :key="item.id">{{ item.name }}</li></template>

What to watch

Content source & attribution

Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

v-for and keys Mastery Check →

Dynamic components