List Rendering with v-for

Just as the NOVA base displays data from multiple sensors simultaneously, v-for renders a list of elements.

Basic v-for

1<template>
2  <div class="sensors-list" style="background: #0a0e27; padding: 1rem;">
3    <!-- Iterating over an array -->
4    <ul style="list-style: none; color: #00ff88;">
5      <li v-for="sensor in sensors" :key="sensor.id"
6          style="border-left: 2px solid #00b4d8; padding: 0.5rem; margin: 0.5rem 0;">
7        {{ sensor.name }} - {{ sensor.value }}{{ sensor.unit }}
8      </li>
9    </ul>
10
11    <!-- With index -->
12    <div v-for="(sensor, index) in sensors" :key="sensor.id"
13         style="color: #00b4d8;">
14      [{{ index + 1 }}] {{ sensor.name }}: {{ sensor.value }}
15    </div>
16  </div>
17</template>
18
19<script setup>
20import { ref } from 'vue'
21
22const sensors = ref([
23  { id: 1, name: 'Oxygen Level', value: 21.5, unit: '%' },
24  { id: 2, name: 'Temperature', value: 22, unit: '°C' },
25  { id: 3, name: 'Pressure', value: 101.3, unit: 'kPa' }
26])
27</script>

Iterating Over Objects

1<template>
2  <div class="module-specs" style="background: #0a0e27; padding: 1rem;">
3    <!-- Values -->
4    <div v-for="value in moduleDetails" :key="value" style="color: #00ff88;">
5      {{ value }}
6    </div>
7
8    <!-- Key and value -->
9    <div v-for="(value, key) in moduleDetails" :key="key"
10         style="color: #00b4d8; border-bottom: 1px solid #00ff8833; padding: 0.25rem;">
11      <strong>{{ key }}:</strong> {{ value }}
12    </div>
13
14    <!-- Key, value, and index -->
15    <div v-for="(value, key, index) in moduleDetails" :key="key">
16      {{ index }}. {{ key }}: {{ value }}
17    </div>
18  </div>
19</template>
20
21<script setup>
22import { reactive } from 'vue'
23
24const moduleDetails = reactive({
25  name: 'Reactor Core Alpha',
26  type: 'Plasma Fusion',
27  output: '500 MW',
28  location: 'Central Hub, Mars Base'
29})
30</script>

Why is :key important?

1<template>
2  <!-- GOOD - unique ID -->
3  <div v-for="item in items" :key="item.id">
4
5  <!-- BAD - index as key (problems with sorting/filtering) -->
6  <div v-for="(item, index) in items" :key="index">
7
8  <!-- BAD - no key -->
9  <div v-for="item in items">
10</template>

v-for with v-if

1<template>
2  <div class="active-sensors">
3    <!-- GOOD - template wrapper -->
4    <template v-for="sensor in sensors" :key="sensor.id">
5      <div v-if="sensor.isActive" style="color: #00ff88;">
6        ✅ {{ sensor.name }}
7      </div>
8    </template>
9
10    <!-- OR - computed filter -->
11    <div v-for="sensor in activeSensors" :key="sensor.id"
12         style="color: #00ff88; border-left: 2px solid #00ff88; padding: 0.5rem;">
13      {{ sensor.name }}
14    </div>
15  </div>
16</template>
17
18<script setup>
19import { ref, computed } from 'vue'
20
21const sensors = ref([...])
22
23const activeSensors = computed(() =>
24  sensors.value.filter(s => s.isActive)
25)
26</script>

Number Range

1<template>
2  <div class="power-bars">
3    <!-- Render 10 times -->
4    <span v-for="n in 10" :key="n"
5          style="display: inline-block; width: 20px; height: 20px; background: #00ff88; margin: 2px;">
6    </span>
7
8    <!-- Result: 10 green squares -->
9  </div>
10</template>