Textová pole a v-model

Formuláře jsou způsob, jak zákazníci aplikaci řeknou, co chtějí: napíšou jméno, vyberou nápoj, zaškrtnou políčko. V této lekci postavíte objednávkový formulář Kavárny Na Rohu, jeden prvek formuláře po druhém, a nakonec ho odešlete.

S tím, co znáte z lekce Stav a události, byste už uměli udržovat text textového pole v refu: :value dá hodnotu refu do textového pole a @input vrátí každou změnu jeho textu zpátky do refu:

<script setup>
import { ref } from "vue";

const jmeno = ref("");

function zmenJmeno(event) {
    jmeno.value = event.target.value;
}
</script>

<template>
    <input :value="jmeno" @input="zmenJmeno">
    <p>Objednávka na jméno {{ jmeno }}</p>
</template>

Formulář má textových polí víc a psát pro každé obě poloviny je zdlouhavé. Direktiva v-model udělá obojí:

<input v-model="jmeno">
<p>Objednávka na jméno {{ jmeno }}</p>

Žádná funkce není potřeba. Napište Anna a v jmeno je "Anna", takže odstavec ukáže Objednávka na jméno Anna. Funguje to i obráceně: když skript ref změní, třeba pomocí jmeno.value = "", textové pole ukáže novou hodnotu, tady prázdný text. Textové pole a ref mají pořád stejný text, a proto se tomu říká obousměrné propojení (anglicky two-way binding).

Stejně funguje i textarea, textové pole pro delší text na víc řádků: <textarea v-model="poznamka"></textarea>. {{ poznamka }} mezi tagy <textarea> nedávejte: tak by se poznámka do pole dostala jen při spuštění stránky, ale co napíšete, by se do refu nedostalo nikdy.

Typické chyby:

• v-model na proměnné, která není ref. S const jmeno = ""; stránka nepoběží a červený pruh hlásí v-model cannot be used on a const binding because it is not writable. (v-model nejde použít na konstantu, protože do ní nejde zapisovat). S let psát můžete, ale stránka se nezmění, stejně jako s obyčejným let v lekci Stav a události.
• v-model="jmeno.value". V šabloně se ref píše bez .value a v-model není výjimka. Při psaní se pak v konzoli ukáže TypeError: Cannot create property 'value' on string ''.