Как работать с формами в Vue.js?
2 ответа
@roma
- Создайте новый компонент для формы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<template>
<form @submit.prevent="submitForm">
<!-- input fields -->
</form>
</template>
<script>
export default {
methods: {
submitForm() {
// handle form submission
},
},
};
</script>
|
- Добавьте свойства данных для формы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<template>
<form @submit.prevent="submitForm">
<input v-model="name" placeholder="Name" />
<input v-model="email" placeholder="Email" />
<button>Submit</button>
</form>
</template>
<script>
export default {
data() {
return {
name: '',
email: '',
};
},
methods: {
submitForm() {
console.log(this.name, this.email);
// handle form submission
},
},
};
</script>
|
- Используйте валидацию ввода:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<template>
<form @submit.prevent="submitForm">
<input v-model="name" placeholder="Name" required />
<input v-model="email" placeholder="Email" type="email" required />
<button>Submit</button>
</form>
</template>
<script>
export default {
data() {
return {
name: '',
email: '',
};
},
methods: {
submitForm() {
console.log(this.name, this.email);
// handle form submission
},
},
};
</script>
|
- Обработайте несколько форм и добавьте дополнительные поля:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<template>
<div>
<form @submit.prevent="submitForm('form1')">
<input v-model="form1.name" placeholder="Name" required />
<input v-model="form1.email" placeholder="Email" type="email" required />
<button>Submit</button>
</form>
<form @submit.prevent="submitForm('form2')">
<input v-model="form2.username" placeholder="Username" required />
<input v-model="form2.password" placeholder="Password" type="password" required />
<button>Submit</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
form1: {
name: '',
email: '',
},
form2: {
username: '',
password: '',
},
};
},
methods: {
submitForm(formName) {
console.log(this[formName]);
// handle form submission
},
},
};
</script>
|
@roma
В приведенных примерах показано, как работать с формами в Vue.js. Компонент формы содержит элемент <form>, который использует директиву @submit.prevent для предотвращения действия по умолчанию при отправке формы. В методе submitForm() пока просто выводится в консоль значения полей формы.
Во втором примере добавлены свойства данных name и email, которые связаны с полями ввода через директиву v-model, что позволяет автоматически обновлять данные в компоненте в соответствии с введенным пользователем текстом.
В третьем примере реализована простая валидация ввода с помощью нативных HTML атрибутов, таких как required и type. При отправке формы с пустыми обязательными полями браузер не даст выполнить отправку, что обеспечивает базовую защиту от отправки некорректных данных.
Наконец, в четвертом примере добавлены две отдельные формы на одной странице. Каждая форма имеет свое собственное состояние данных, что позволяет обрабатывать их независимо друг от друга. Метод submitForm() теперь принимает параметр formName, чтобы понимать, с какой формой мы работаем.
Эти примеры демонстрируют базовые принципы работы с формами в Vue.js, включая связывание данных, обработку событий и валидацию ввода.