Mezery a čísla

Co zákazníci napíšou, není vždycky to, co myslí, a nejčastěji překážejí dvě věci. v-model má na každou z nich modifikátor: slovo za tečkou, které změní, co dělá, stejně jako .enter v @keydown.enter.

Mezery. Jméno napsané s mezerami kolem, "  Anna ", se dostane do refu i s nimi. Na stránce mezery před ním většinou zmizí, ale ta za ním je vidět: Objednávka na jméno Anna . A jméno ze samých mezer není "", takže ho kontrola prázdného jména nezachytí. v-model.trim dá text do refu bez mezer na začátku a na konci, stejně jako trim():

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

Čísla. Hodnota textového pole je vždycky text a stejně tak value možnosti v seznamu: value="20" je "20", ne 20. A text a čísla se nesčítají, jak víte z kurzu JavaScriptu: 75 + "20" je "7520". Tady je spropitné z rozbalovacího seznamu, přičtené k ceně cappuccina:

<select v-model="spropitne">
    <option value="0">Bez spropitného</option>
    <option value="20">20 Kč</option>
</select>
<p>Celkem: {{ cena + spropitne }} Kč</p>

S const cena = 75; a vybranými 20 Kč je celkem 7520 Kč. v-model.number převede hodnotu na číslo dřív, než ji dá do refu, a celkem je pak 95 Kč:

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

K číslům ještě dvě věci:

• Textové pole s type="number" je určené pro čísla a Vue k jeho v-model přidá .number samo.
• Přepínače a zaškrtávací políčka .number ignorují. Dejte jim hodnoty přes :value: :value="20" je číslo 20, protože s : je v uvozovkách JavaScript.