Vue.js kurz & gut

KAPITEL 9

Formulareingaben mit v-model

Mit der Double-Mustache-Syntax {{ }} lassen sich Daten im Template darstellen. Doch was ist mit Formularfeldern, die ihre Daten gleichzeitig reaktiv anzeigen und modifizieren können?

Mit der Direktive v-model kann eine bidirektionale Verknüpfung zwischen Formularfeldern und ihren Daten definiert werden. Das klingt zunächst wie Zauberei, ist aber eigentlich nur eine Kombination aus herkömmlichem Data Binding und Events mit v-bind und v-on.

Die Direktive v-model wird die HTML-Attribute value (bei Inputs), checked (bei Checkboxen) und selected (bei Drop-downs) immer ignorieren und ihren Standardwert über das verknüpfte Datenattribut herleiten. Die Standardwerte für Formularfelder sollten also immer im Datenobjekt ...