Vue.js zjednodušuje práci s formuláři pomocí direktivy v-model. Podíváme se, jak pomocí této direktivy vázat vstupy formuláře na reaktivní vlastnosti, zpracovávat odesílání formulářů a efektivně pracovat se vstupy uživatele.
Nastavení reaktivních vlastností
Prvním krokem při práci s formuláři je vytvoření reaktivní vlastnosti, která bude uchovávat data z formuláře. Ve Vue.js můžete použít ref nebo reactive pro definování reaktivního objektu, který bude obsahovat data formuláře.
const formData = ref({
name: '',
password: '',
age: '',
checked: false,
});
Tento objekt formData bude sloužit jako datový úložiště pro vstupy formuláře.
Vytvoření základního formuláře
Vytvoříme jednoduchý registrační formulář, který obsahuje různé typy vstupních polí. Všimněte si použití v-model na každém vstupu. Tato direktiva váže pole formuláře na odpovídající vlastnost v objektu formData.
<form @submit.prevent="submitForm">
<label for="name">Name: </label>
<input type="text" id="name" v-model.trim="formData.name">
<label for="password">Password: </label>
<input type="password" id="password" v-model="formData.password">
<label for="age">Age: </label>
<input type="text" id="age" v-model.number="formData.age">
<input type="checkbox" v-model="formData.checked">
<button type="submit">Submit</button>
</form>
V tomto formuláři připojujeme obslužnou funkci k odeslání formuláře. Namísto klasického volání e.preventDefault() použijeme submit.prevent, což zajistí stejný výsledek.
Zpracování odesílání formuláře
Pro zpracování dat z formuláře definujeme metodu submitForm, která tato data zaloguje nebo odešle.
function submitForm() {
console.log(formData.value);
console.log(typeof formData.value.age); // number
}
Díky v-model.number je typ hodnoty formData.value.age automaticky číslo, místo aby byl textový řetězec.
Použití modifikátorů s v-model
Vue.js nabízí modifikátory, které rozšiřují funkcionalitu v-model:
number: Automaticky převádí hodnoty vstupu na čísla.trim: Odstraňuje mezery na začátku a na konci hodnoty vstupu.
<input type="text" v-model.number="formData.age">
<input type="text" v-model.trim="formData.name">
Tyto modifikátory usnadňují práci se vstupními daty bez potřeby dodatečného zpracování.
Práce s checkboxy
Checkbox vstupy jsou vázány na boolean hodnotu pomocí v-model.
<input type="checkbox" id="terms" v-model="formData.checked">
<label for="terms">I agree to the terms</label>
Hodnota formData.checked se aktualizuje na true nebo false podle toho, jak je checkbox zaškrtnutý.
Živá zpětná vazba
Uživatelům můžete poskytovat živou zpětnou vazbu tak, že zobrazíte reaktivní vlastnosti přímo ve šabloně. Ty se aktualizují dynamicky při interakci s formulářem.
<p>Checked: {{ formData.checked }}</p>
Kompletní příklad
Pro přehlednost uvedeme celý příklad:
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<form @submit.prevent="submitForm">
<p>
<label for="email">Email: </label>
<input type="email" id="email" v-model.trim="formData.email">
</p>
<p>
<label for="password">Password: </label>
<input type="password" id="password" v-model.trim="formData.password">
</p>
<p>
<input type="checkbox" v-model="formData.checked">
</p>
<p>
<label for="age">Age: </label>
<input type="text" id="age" v-model.number="formData.age">
</p>
<button type="submit">Submit</button>
</form>
</div>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
const formData = ref({
email: '',
password: '',
checked: false,
age: "",
});
function submitForm() {
console.log(formData.value);
console.log(typeof formData.value.age);
}
return {
formData,
submitForm,
}
},
}).mount("#app");
</script>
</body>
</html>
Video
Nerad čteš, tak mrkni na video 👇
Play