vue实现表单提交功能
表单基础结构
在Vue中实现表单提交功能，通常使用v-model指令实现双向数据绑定。以下是一个基础表单结构示例：
<template>
<form @submit.prevent="handleSubmit">
<input v-model="formData.username" type="text" placeholder="用户名">
<input v-model="formData.password" type="password" placeholder="密码">
<button type="submit">提交</button>
</form>
</template>数据绑定与验证
定义表单数据对象和提交方法，可结合基础验证：
<script>
export default {
data() {
return {
formData: {
username: '',
password: ''
}
}
},
methods: {
handleSubmit() {
if (!this.formData.username || !this.formData.password) {
alert('请填写完整信息');
return;
}
console.log('提交数据:', this.formData);
// 这里添加实际提交逻辑
}
}
}
</script>使用第三方验证库
对于复杂验证，推荐使用vee-validate或vuelidate。以vee-validate为例：
import { useField, useForm } from 'vee-validate';
export default {
setup() {
const { handleSubmit } = useForm();
const { value: username } = useField('username', required);
const { value: password } = useField('password', required);
const onSubmit = handleSubmit(values => {
console.log('验证通过:', values);
});
return { username, password, onSubmit };
}
}表单提交与API交互
结合axios实现异步提交：
methods: {
async handleSubmit() {
try {
const response = await axios.post('/api/submit', this.formData);
console.log('提交成功:', response.data);
} catch (error) {
console.error('提交失败:', error);
}
}
}表单重置功能
添加重置按钮及对应方法：
methods: {
resetForm() {
this.formData = {
username: '',
password: ''
};
}
}<button type="button" @click="resetForm">重置</button>表单加载状态
添加提交中的加载状态：
data() {
return {
isLoading: false,
// ...其他数据
}
},
methods: {
async handleSubmit() {
this.isLoading = true;
try {
await axios.post('/api/submit', this.formData);
} finally {
this.isLoading = false;
}
}
}<button type="submit" :disabled="isLoading">
{{ isLoading ? '提交中...' : '提交' }}
</button>
