Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Bắt sự kiện click trong Javascript 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Xử lý sự kiện Submit Form trong VueJs 2
Trong bài viết này, mình sẽ tìm hiểu cách sử dụng VueJS 2 để Xử lý sự kiện Submit Form. Cho phép người dùng tạo một gửi dữ liệu hoặc hiển thị thông báo khi form được submit.
Xử lý sự kiện Submit Form trong VueJS 2
Yêu cầu
Mình sẽ tạo một form đơn giản bao gồm các trường nhập liệu là tên và email. Mục tiêu là xử lý sự kiện khi form được submit, có thể gửi dữ liệu đi hoặc hiển thị thông báo.
Để thực hiện bài tập này, mình sẽ tạo file index.html để hiển thị giao diện và file main.js để xử lý logic trong VueJS 2.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Xử Lý Sự Kiện Submit Form - VueJS 2</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#app {
text-align: center;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
input[type="text"], input[type="email"], input[type="submit"] {
margin: 10px;
padding: 8px;
font-size: 16px;
border-radius: 4px;
border: 1px solid #ccc;
}
p {
margin-top: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<div id="app">
<form @submit.prevent="handleSubmit">
<input type="text" v-model="name" placeholder="Tên của bạn">
<input type="email" v-model="email" placeholder="Email của bạn">
<input type="submit" value="Gửi">
</form>
<p v-if="submitted">Form đã được gửi! Tên: {{ name }}, Email: {{ email }}</p>
</div>
<script src="main.js"></script>
</body>
</html>
main.js
new Vue({
el: '#app',
data: {
name: '',
email: '',
submitted: false
},
methods: {
handleSubmit() {
// Xử lý dữ liệu hoặc hiển thị thông báo ở đây
this.submitted = true; // Đặt submitted thành true để hiển thị thông báo
}
}
});Trong đoạn mã này:
- Mình đã tạo một form với hai trường nhập liệu là tên
(input type="text")vàemail (input type="email")cùng với một nútsubmit (input type="submit"). - Sử dụng directive
@submit.preventđể ngăn chặn hành vi mặc định của form khi submit và gọi method handleSubmit() khi form được submit. - Trong
method handleSubmit(),mình có thể xử lý dữ liệu được nhập vào form hoặc thực hiện các hành động mong muốn. Ở đây, mình đơn giản chỉ đặt biếnsubmittedthành true để hiển thị thông báo rằng form đã được gửi thành công.
Đây là một cách linh hoạt để xử lý sự kiện submit form trong VueJS 2 và có thể mở rộng để xử lý dữ liệu và thực hiện các hành động phức tạp hơn sau mỗi lần submit.
Trong bài viết này, mình sẽ tập trung vào cách VueJS 2 giúp mình xử lý sự kiện submit form và cách chúng ta có thể tận dụng tính linh hoạt của nó để gửi dữ liệu hoặc hiển thị thông báo sau mỗi lần submit.
Bài giải
-------------------- ######## --------------------
Câu hỏi thường gặp liên quan:
- Xử lý sự kiện Click trong VueJs 2
- Xử lý sự kiện Input trong VueJs 2
- Xử lý sự kiện Submit Form trong VueJs 2
- Xử lý sự kiện Keydown/Keyup trong VueJs 2
- Xử lý sự kiện Mouseover/Mouseout trong VueJs 2
- Xử lý sự kiện Scroll trong VueJs 2
- Xử lý sự kiện Custom trong VueJs 2
- Xử lý sự kiện Time-related Events trong VueJs 2
- Xử lý sự kiện Resize trong VueJs 2
- Xử lý sự kiện Form Validation trong VueJs 2
