Formulare und v-model

Vue.jsvuejs

Damit Vue vom User eingegebene Daten verwenden kann, werden normale HTML-Formulare verwendet. Jedoch werden die Daten nicht vom Formular direkt an den Server gesendet, sondern werden zuerst von Vue ausgelesen und dann via Javascript-Code ans Backend gesendet.

Wie der Versand von Formulardaten genau aussieht ist im Kapitel Formulardaten verarbeiten beschrieben.

v-model

Damit Vue den "Link" zwischen einer Javascript-Variable und einem HTML Formular Element herstellen kann wird die v-model Direktive verwendet:

<!-- HelloWorld.vue -->
<script setup>
// Der Text vom User wird in einer reaktiven Variable gespeichert
const name= ref('');
</script>

<template>
    <!-- Mittels `v-model` wird die Verbindung vom Inhalt des Input-Felds
         und der Variable hergestellt -->
    <input type="text" v-model="name" />
    <span>Hallo, {{ name }}</span>
</template>

Weitere Formularelemente

Im folgenden Beispiel sind mehr Formularelement mit entsprechenden v-models veranschaulicht:

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

const text = ref('Mein Text')
const option = ref('Zitronen')
const checkbox = ref(false)
const radio = ref('bananen')
</script>

<template>
  <h2>Formular</h2>
  <input type="text" v-model="text"><br>
  <select v-model="option"><br>
    <option value="Zitronen">Zitronen</option>
    <option value="Orangen">Orangen</option>
    <option value="Limetten">Limetten</option>
  </select><br>
  <input type="checkbox" v-model="checkbox" id="checkbox"> <label for="checkbox">Checkbox</label><br>
  <br>
  <input type="radio" v-model="radio" value="Bananen" id="bananen"> <label for="bananen">Bananen</label><br>
  <input type="radio" v-model="radio" value="Äpfel" id="apfel"> <label for="apfel">Äpfel</label><br>
  <input type="radio" v-model="radio" value="Birnen" id="birnen"> <label for="birnen">Birnen</label><br>

  <h2>Ausgewählte Daten</h2>
  Text: {{ text }}<br>
  Option: {{ option }}<br>
  Checkbox: {{ checkbox }}<br>
  Radiobuttons: {{ radio }}
</template>

Vue SFC Playgroundplay.vuejs.org

Beispiel im Playground ansehen

Data-Flow

Hinter v-model verbirgt sich nichts anderes als die Funktionalität welche im Kapitel Events und Data Flowbeschrieben worden sind:

<script setup>
const text = ref('')
</script>

<template>
    <input
        :value="text"
        @input="event => text = event.target.value">
    
    <!-- ist dasselbe wie -->
    
    <input v-model="text">
</template>