To handle form submission in Vue.js, follow these steps:
- Bind Input Fields: Use v–model directives to bind input fields to data properties.
- Form Submission Handling: Add a submit event handler using @submit.prevent.
- Validation: Implement validation for each field.
- Data Processing: Send the form data to your backend API using Axios.
- Feedback: Provide user feedback based on the response.
Example Code:
|
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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<template> <div class=“container”> <form @submit.prevent=“handleSubmit” class=“login-form”> <div class=“form-group”> <label>Username</label> <input type=“text” v–model.trim=“$v.username.$model” :class=“{ ‘is-invalid’: $v.username.$error }” /> <span v–if=“$v.username.$error” class=“error-message”> {{ $v.username.$errors[0].$message }} </span> </div> <div class=“form-group”> <label>Password</label> <input type=“password” v–model.trim=“$v.password.$model” :class=“{ ‘is-invalid’: $v.password.$error }” /> <span v–if=“$v.password.$error” class=“error-message”> {{ $v.password.$errors[0].$message }} </span> </div> <button type=“submit”>Submit</button> </form> </div> </template> <script> import { required, email } from ‘vuelidate/lib/validators’ export default { data() { return { username: ”, password: ” } }, validations: { username: { required }, password: { required } }, methods: { handleSubmit() { // Reset form validation this.$v.$reset() // Submit the form this.submitForm() .then(() => { // Handle success alert(‘Form submitted successfully!’) this.formReset() }) .catch(error => { // Handle error console.error(‘Error:’, error) alert(‘Failed to submit form.’) }) }, submitForm() { return axios.post(‘/api/submit’, { username: this.username, password: this.password }).then(response => { if (response.data.message) { throw new Error(response.data.message) } return response }) }, formReset() { this.username = ” this.password = ” // Reset validation this.$v.$reset() } } } </script> |
Explanation:
- Binding Fields: Use v–model to bind inputs to component data.
- Validation: Use Vuelidate for field validation. Add validations in the validations object.
- Submit Handling: The handleSubmit method prevents default form submission, validates fields, and calls submitForm.
- Submitting Data: submitForm sends a POST request using Axios. Adjust the endpoint and data as needed.
- Feedback: Show user notifications based on API response or errors.
This approach ensures clean and manageable form handling with proper validation and feedback in Vue.js applications.
Leave a Reply
You must be logged in to post a comment.