Kapitel 10: Vue Directive (Teil 3) - Listen mit v-for

📗 Lernziel: Listen mit v-for effizient rendern!

---

10.1 v-for Grundlagen

v-for rendert Listen aus Arrays oder Objekten.

Syntax:

<script setup>
import { ref, reactive } from 'vue'

// Array
const items = ref(['Apfel', 'Banane', 'Orange'])

// Objekt
const user = reactive({
  name: 'Max',
  age: 25,
  city: 'Berlin'
})

// Array von Objekten
const todos = ref([
  { id: 1, text: 'Lernen', done: false },
  { id: 2, text: 'Sport', done: true },
  { id: 3, text: 'Einkaufen', done: false }
])
</script>

<template>
  <!-- Array iterieren -->
  <ul>
    <li v-for="item in items" :key="item">{{ item }}</li>
  </ul>
  
  <!-- Array mit Index -->
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ index + 1 }}. {{ item }}
    </li>
  </ul>
  
  <!-- Objekt iterieren -->
  <ul>
    <li v-for="(value, key) in user" :key="key">
      {{ key }}: {{ value }}
    </li>
  </ul>
  
  <!-- Array von Objekten -->
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      <input type="checkbox" v-model="todo.done" />
      <span :style="{ textDecoration: todo.done ? 'line-through' : 'none' }">
        {{ todo.text }}
      </span>
    </li>
  </ul>
</template>

---

10.2 key Attribut (Wichtig!)

key hilft Vue, Elemente eindeutig zu identifizieren.

Warum key wichtig ist:

• ✅ Bessere Performance
• ✅ Korrekte Zustandserhaltung
• ✅ Vermeidet Rendering-Fehler

Richtige Verwendung:

<!-- ❌ Falsch (Index als key) -->
<li v-for="(item, index) in items" :key="index">

<!-- ✅ Richtig (Eindeutige ID) -->
<li v-for="item in items" :key="item.id">

Beispiel:

<script setup>
import { ref } from 'vue'

const users = ref([
  { id: 1, name: 'Max' },
  { id: 2, name: 'Anna' },
  { id: 3, name: 'Tom' }
])
</script>

<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
</template>

---

10.3 v-for mit Bereich

v-for kann auch einen Bereich durchlaufen:

<template>
  <!-- 1 bis 10 -->
  <span v-for="n in 10" :key="n">{{ n }} </span>
  <!-- Ausgabe: 1 2 3 4 5 6 7 8 9 10 -->
  
  <!-- Mit Startwert -->
  <span v-for="n in 5" :key="n">{{ n + 5 }} </span>
  <!-- Ausgabe: 6 7 8 9 10 -->
</template>

---

10.4 v-for mit v-if (Vorsicht!)

❌ Vermeide v-for mit v-if auf demselben Element!

Warum?

• v-if hat höhere Priorität als v-for
• Kann zu unerwartetem Verhalten führen

Lösung: <template> verwenden:

<script setup>
import { ref } from 'vue'

const todos = ref([
  { id: 1, text: 'Lernen', done: false },
  { id: 2, text: 'Sport', done: true },
  { id: 3, text: 'Einkaufen', done: false }
])
</script>

<template>
  <!-- ❌ Falsch -->
  <li v-for="todo in todos" v-if="!todo.done" :key="todo.id">
    {{ todo.text }}
  </li>
  
  <!-- ✅ Richtig (computed property nutzen) -->
  <li v-for="todo in undoneTodos" :key="todo.id">
    {{ todo.text }}
  </li>
</template>

<script setup>
import { computed } from 'vue'

const undoneTodos = computed(() => todos.value.filter(todo => !todo.done))
</script>

---

10.5 Übung: To-Do Liste mit v-for

Aufgabe: Erstelle eine To-Do Liste mit v-for.

Lösung:

<script setup>
import { ref } from 'vue'

const newTodo = ref('')
const todos = ref([
  { id: 1, text: 'Vue 3 lernen', done: false },
  { id: 2, text: 'Projekt erstellen', done: true }
])

const addTodo = () => {
  if (newTodo.value.trim() !== '') {
    todos.value.push({
      id: Date.now(),
      text: newTodo.value,
      done: false
    })
    newTodo.value = ''
  }
}

const removeTodo = (id) => {
  todos.value = todos.value.filter(todo => todo.id !== id)
}
</script>

<template>
  <div>
    <h2>To-Do Liste</h2>
    <input 
      v-model="newTodo" 
      @keyup.enter="addTodo"
      placeholder="Neue Aufgabe..."
    />
    <button @click="addTodo">Hinzufügen</button>
    
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.done" />
        <span :style="{ textDecoration: todo.done ? 'line-through' : 'none' }">
          {{ todo.text }}
        </span>
        <button @click="removeTodo(todo.id)">Löschen</button>
      </li>
    </ul>
  </div>
</template>

---

✅ Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ v-for Grundlagen (Array, Objekt)
• ✅ key Attribut (wichtig für Performance)
• ✅ v-for mit Bereich
• ✅ v-for mit v-if (Vorsicht!)
• ✅ To-Do Liste mit v-for erstellen

🎯 Nächster Schritt: In Kapitel 11 lernst du weitere Directive (v-once, v-html, v-pre)!

---

← Zurück zu Kapitel 9: Bedingte RenderingWeiter zu Kapitel 11: Weitere Directive →