Leerzeichen und Zahlen

Was Kunden tippen, ist nicht immer das, was sie meinen, und zwei Dinge stören am häufigsten. v-model hat für jedes einen Modifikator: ein Wort nach einem Punkt, das ändert, was es tut, so wie .enter bei @keydown.enter.

Leerzeichen. Ein Name, der mit Leerzeichen drumherum getippt wurde, "  Anna ", kommt mit ihnen ins Ref. Auf der Seite verschwinden die Leerzeichen davor meistens, aber das danach ist zu sehen: Bestellung für Anna . Und ein Name aus lauter Leerzeichen ist nicht "", also fängt eine Prüfung auf einen leeren Namen ihn nicht ab. v-model.trim schreibt den Text ohne die Leerzeichen an Anfang und Ende ins Ref, so wie trim():

<input v-model.trim="name">

Zahlen. Der Wert eines Felds ist immer Text, und der value einer Option auch: value="2" ist "2", nicht 2. Und Text und Zahlen lassen sich nicht addieren, wie du aus dem JavaScript-Kurs weißt: 3 + "2" ist "32". Hier ist ein Trinkgeld aus einer Auswahlliste, das zum Preis eines Cappuccinos addiert wird:

<select v-model="trinkgeld">
    <option value="0">Kein Trinkgeld</option>
    <option value="2">2 €</option>
</select>
<p>Gesamt: {{ preis + trinkgeld }} €</p>

Mit const preis = 3; und 2 € als Wahl ist die Summe 32 €. v-model.number macht aus dem Wert eine Zahl, bevor er ins Ref kommt, und dann ist die Summe 5 €:

<select v-model.number="trinkgeld">

Noch zwei Dinge zu Zahlen:

• Ein Feld mit type="number" ist ein Feld für Zahlen, und Vue hängt .number an sein v-model von selbst an.
• Radiobuttons und Checkboxen ignorieren .number. Gib ihnen ihre Werte stattdessen mit :value: :value="2" ist die Zahl 2, denn mit : ist das, was in den Anführungszeichen steht, JavaScript.