javascript / beginner
Snippet
List Rendering with v-for
The v-for directive allows you to render a list of items based on an array. It requires a special syntax 'item in items' and should always include a unique :key for performance and stability.
snippet.js
javascript
1
2
3
4
5
6
7
<template><ul><li v-for="fruit in fruits" :key="fruit.id">{{ fruit.name }}</li></ul></template>
vue
Breakdown
1
v-for="fruit in fruits"
Iterates through the fruits array, assigning each element to the fruit variable.
2
:key="fruit.id"
Provides a unique identifier for Vue to track each node's identity.