Formulare & v-model

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

const name = ref('')
</script>

<template>
  <div>
    <label for="name">Dein Name:</label>
    <input id="name" v-model="name" placeholder="Name eingeben" />

    <p>Hallo, {{ name || 'Fremder' }}!</p>
  </div>
</template>

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

const username = ref('')
const bio = ref('')
</script>

<template>
  <div class="space-y-4">
    <!-- Einfaches Textfeld -->
    <div>
      <label for="username">Benutzername:</label>
      <input id="username" v-model="username" type="text" />
      <p>Benutzername: {{ username }}</p>
    </div>

    <!-- Textarea — Inhalt zwischen den Tags wird ignoriert! -->
    <div>
      <label for="bio">Bio:</label>
      <textarea id="bio" v-model="bio" rows="4" />
      <p>Zeichen: {{ bio.length }}</p>
    </div>
  </div>
</template>

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

// Einzelne Checkbox → Boolean
const newsletter = ref(false)

// Mehrere Checkboxen → Array
const interests = ref([])
</script>

<template>
  <div class="space-y-6">
    <!-- Einzelne Checkbox -->
    <div>
      <label>
        <input v-model="newsletter" type="checkbox" />
        Newsletter abonnieren
      </label>
      <p>Newsletter: {{ newsletter ? 'Ja' : 'Nein' }}</p>
    </div>

    <!-- Mehrere Checkboxen mit demselben v-model -->
    <div>
      <p class="font-medium">Interessen:</p>
      <label>
        <input v-model="interests" type="checkbox" value="Frontend" />
        Frontend
      </label>
      <label>
        <input v-model="interests" type="checkbox" value="Backend" />
        Backend
      </label>
      <label>
        <input v-model="interests" type="checkbox" value="DevOps" />
        DevOps
      </label>
      <p>Ausgewählt: {{ interests.join(', ') || 'Nichts' }}</p>
    </div>
  </div>
</template>

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

const experience = ref('')
</script>

<template>
  <div>
    <p class="font-medium">Erfahrungslevel:</p>

    <label>
      <input v-model="experience" type="radio" value="Anfänger" />
      Anfänger
    </label>

    <label>
      <input v-model="experience" type="radio" value="Fortgeschritten" />
      Fortgeschritten
    </label>

    <label>
      <input v-model="experience" type="radio" value="Experte" />
      Experte
    </label>

    <p>Dein Level: {{ experience || 'Noch nicht gewählt' }}</p>
  </div>
</template>

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

const framework = ref('')
const languages = ref([])
</script>

<template>
  <div class="space-y-6">
    <!-- Einfachauswahl -->
    <div>
      <label for="framework">Lieblings-Framework:</label>
      <select id="framework" v-model="framework">
        <option value="" disabled>Bitte wählen...</option>
        <option>Vue</option>
        <option>React</option>
        <option>Angular</option>
        <option>Svelte</option>
      </select>
      <p>Gewählt: {{ framework || 'Nichts' }}</p>
    </div>

    <!-- Mehrfachauswahl -->
    <div>
      <label for="languages">Sprachen (Ctrl/Cmd + Klick):</label>
      <select id="languages" v-model="languages" multiple>
        <option>JavaScript</option>
        <option>TypeScript</option>
        <option>Ruby</option>
        <option>Python</option>
      </select>
      <p>Gewählt: {{ languages.join(', ') || 'Keine' }}</p>
    </div>
  </div>
</template>

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

const searchQuery = ref('')
const age = ref(0)
const email = ref('')
</script>

<template>
  <div class="space-y-6">
    <!-- .lazy: Synchronisiert erst bei "change" (Fokusverlust / Enter) -->
    <div>
      <label>Suche (.lazy):</label>
      <input v-model.lazy="searchQuery" placeholder="Erst bei Enter/Blur..." />
      <p>Suchbegriff: "{{ searchQuery }}"</p>
    </div>

    <!-- .number: Automatische Konvertierung in Number -->
    <div>
      <label>Alter (.number):</label>
      <input v-model.number="age" type="number" />
      <p>Alter: {{ age }} (Typ: {{ typeof age }})</p>
    </div>

    <!-- .trim: Entfernt Whitespace am Anfang und Ende -->
    <div>
      <label>E-Mail (.trim):</label>
      <input v-model.trim="email" type="email" placeholder="  test@example.com  " />
      <p>E-Mail: "{{ email }}"</p>
    </div>
  </div>
</template>

<!-- CustomRating.vue — die Kindkomponente -->
<script setup>
const rating = defineModel({ default: 0 })
</script>

<template>
  <div class="flex gap-1">
    <button
      v-for="star in 5"
      :key="star"
      @click="rating = star"
      :class="star <= rating ? 'text-yellow-400' : 'text-gray-300'"
    >
      ★
    </button>
  </div>
</template>

<!-- Elternkomponente — v-model funktioniert wie gewohnt -->
<!-- <CustomRating v-model="userRating" /> -->
<!-- <p>Bewertung: {{ userRating }} von 5</p> -->