javascript / beginner
Snippet
List Rendering with v-for
The v-for directive is used to render a list of items based on an array. It uses the syntax 'item in items'. It is required to provide a unique ':key' so Vue can efficiently track and update the items in the list.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template><ul><li v-for="user in users" :key="user.id">{{ user.name }}</li></ul></template><script setup>const users = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' }];</script>
vue
Breakdown
1
v-for="user in users"
Iterates through the users array and assigns each object to the 'user' variable.
2
:key="user.id"
A unique identifier used by Vue to optimize list rendering.
3
{{ user.name }}
Displays the name property of the current user in the template.