一、vue提交表单没反应
1、检查表单是否绑定到正确的数据
<form v-on:submit.prevent="submitForm">
<!-- ... -->
</form>
Vue.component({
data: function() {
return { form: {} };
},
methods: {
submitForm: function() {
console.log(this.form);
}
}
});
2、确保提交表单的方法已正确绑定
<form v-on:submit.prevent="submitForm">
<!-- ... -->
</form>
Vue.component({
methods: {
submitForm: function() {
console.log('form submitted');
}
}
});
3、查看前端和后端的请求和响应情况，看是否存在问题
二、vue提交表单后如何返回到上一页
1、在返回按钮中使用history.go(-1)方法回到上一页
<button v-on:click="goBack"> 返回 </button>
Vue.component({
methods: {
goBack: function() {
history.go(-1);
}
}
});
2、在页面中使用vue-router进行跳转实现页面返回
<router-link to="/"> 返回 </router-link>
三、vue提交表单数据
1、使用v-model绑定数据
<input v-model="form.userName">
<input v-model="form.email">
<button v-on:click="submitForm">提交</button>
Vue.component({
data: function () {
return {
form: {
userName: '',
email: ''
}
}
},
methods: {
submitForm: function () {
console.log(form);
}
}
});
2、使用ref获取表单元素的值
<input ref="userName">
<input ref="email">
<button v-on:click="submitForm">提交</button>
Vue.component({
methods: {
submitForm: function () {
console.log(this.$refs.userName.value);
console.log(this.$refs.email.value);
}
}
});
四、vue提交表单时怎么校验信息
1、使用vuelidate进行验证
<input v-model="form.userName">
<input v-model="form.email">
<button v-on:click="submitForm">提交</button>
Vue.component({
data: function () {
return {
form: {
userName: '',
email: ''
}
}
},
validations: {
form: {
email: {
required,
email
},
userName: {
required,
minLength: minLength(3)
}
}
},
methods: {
submitForm: function () {
this.$v.form.$touch();
if (!this.$v.form.$error) {
console.log('submit success');
}
}
}
});
2、手动验证信息
<input v-model="form.userName">
<input v-model="form.email">
<button v-on:click="submitForm">提交</button>
Vue.component({
data: function () {
return {
form: {
userName: '',
email: ''
},
errors: {}
}
},
methods: {
validate: function () {
this.errors = {};
if (!this.form.userName) {
this.errors.userName = '用户名不能为空';
}
if (!this.form.email) {
this.errors.email = 'Email不能为空';
}
return Object.keys(this.errors).length === 0;
},
submitForm: function () {
if (this.validate()) {
console.log('submit success');
}
}
}
});
五、vue提交表单数据到后端
1、使用axios发送表单数据
<form v-on:submit.prevent="submitForm">
<!-- ... -->
</form>
Vue.component({
methods: {
submitForm: function () {
axios.post('url', this.form).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
}
}
});
2、使用fetch发送表单数据
<form v-on:submit.prevent="submitForm">
<!-- ... -->
</form>
Vue.component({
methods: {
submitForm: function () {
var data = this.form;
var formData = new FormData();
for (var key in data) {
formData.append(key, data[key]);
}
fetch('url', {
method: 'POST',
body: formData
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
}
}
});
六、vue提交表单、后端map接收
1、使用json的方式发送表单数据，并在后端进行json解析
<form v-on:submit.prevent="submitForm">
<!-- ... -->
</form>
Vue.component({
methods: {
submitForm: function () {
axios.post('url', JSON.stringify(this.form)).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
}
}
});
2、使用springmvc将表单数据绑定到map中
@RequestMapping("/saveUserInfo")
@ResponseBody
public String saveUserInfo(@RequestBody Map userInfo) {
System.out.println(userInfo.get("userName"));
System.out.println(userInfo.get("email"));
return "success";
}
七、vue提交表单数据到邮箱
1、使用后端发送邮件的工具类发送邮件
public void sendMail(String subject, String content, String to) {
JavaMailSenderImpl mailSender = new JavaMailSenderImpl();
mailSender.setUsername("用户名");
mailSender.setPassword("密码");
mailSender.setHost("smtp.qq.com");
mailSender.setPort(587);
Properties properties = new Properties( );
properties.put("mail.smtp.auth", "true");
properties.put("mail.smtp.starttls.enable", "true");
properties.put("mail.smtp.timeout", 10000);
mailSender.setJavaMailProperties(properties);
MimeMessage message = mailSender.createMimeMessage( );
MimeMessageHelper helper = new MimeMessageHelper(message);
helper.setSubject(subject);
helper.setFrom("发件人");
helper.setText(content, true);
helper.setTo(to);
mailSender.send(message);
}
2、 使用第三方的邮件发送服务发送邮件
axios.get('http://api.sendcloud.net/apiv2/mail/send', {
params: {
apiUser: apiUser,
apiKey: apiKey,
to: to,
from: from,
fromName: senderName,
subject: subject,
html: content
}
}).then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
});
八、vue form表单提交
<template>
<form v-on:submit.prevent="submitForm">
<label> Name: <input v-model="form.name"> </label>
<label> Email: <input v-model="form.email"> </label>
<button type="submit"> Submit </button>
</form>
</template>
Vue.component({
data: function () {
return {
form: {
name: '',
email: ''
}
}
},
methods: {
submitForm: function () {
console.log('form submitted');
}
}
});
九、vue表单
<template>
<form>
<div class="form-group">
<label for="name"> Name: </label>
<input type="text" class="form-control" id="name" v-model="form.name">
</div>
<div class="form-group">
<label for="email"> Email: </label>
<input type="email" class="form-control" id="email" v-model="form.email">
</div>
<button type="submit" class="btn btn-primary" v-on:click="submitForm"> Submit </button>
</form>
</template>
Vue.component({
data: function () {
return {
form: {
name: '',
email: ''
}
}
},
methods: {
submitForm: function () {
console.log('form submitted');
}
}
});
十、vue获取表单数据
1、使用v-model绑定数据并在submitForm方法中获取
<div id="app">
<input v-model="name">
<input v-model="email">
<button v-on:click="submitForm">提交</button>
</div>
new Vue({
el: '#app',
data: {
name: '',
email: ''
},
methods: {
submitForm: function () {
console.log(this.name);
console.log(this.email);
}
}
});
2、使用ref获取表单元素的值
<div id="app">
<input ref="name">
<input ref="email">
<button v-on:click="submitForm">提交</button>
</div>
new Vue({
el: '#app',
methods: {
submitForm: function () {
console.log(this.$refs.name.value);
console.log(this.$refs.email.value);
}
}
});
以上是关于vue表单提交的实践与总结，稍微有些繁琐,但希望大家在实际项目中能够根据需求有针对性的使用各种提交方式。
原创文章，作者：MIVTX，如若转载，请注明出处：https://www.506064.com/n/370884.html
微信扫一扫 
支付宝扫一扫 