一、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/zh-hant/n/370884.html
微信掃一掃 
支付寶掃一掃 