Php laravel vuejs表单提交返回到具有查询字符串的同一页面
我正在尝试提交一份包含laravel和vuejs的表单,其组件如下:Php laravel vuejs表单提交返回到具有查询字符串的同一页面,php,laravel,vue.js,Php,Laravel,Vue.js,我正在尝试提交一份包含laravel和vuejs的表单,其组件如下: <form action="#" @submit.prevent="submitMobile"> <div class="container my-5 z-depth-1"> <!-- Form --> <
<form action="#" @submit.prevent="submitMobile">
<div class="container my-5 z-depth-1">
<!-- Form -->
<form class="" action="">
<!-- Section heading -->
<div class="input-group">
<input class="form-control send-sms-btn" name="mobile"
v-validate="'required:11'" placeholder="_ _ _ _ _ _ _ _"
aria-label="Enter your email address"
aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn-theme btn btn-md btn-primary rounded-right m-0 px-3 py-2 z-depth-0 waves-effect"
type="submit" id="button-addon2">submit
</button>
</div>
</div>
</form>
</form>
我尝试了两个函数,但它们都返回到同一个页面,并带有我发送的输入的查询字符串。现在我想知道如何在不刷新页面的情况下提交此表单。提前谢谢试试这个。$router.push()
submitMobile:function(){
this.$http.post('/customer/send sms',this.formData)。然后(函数(响应){
这是$router.push({
名称:“路由\名称”//t您需要添加的路由名称
查询:{mobile:this.mobile},
});
},函数(){
console.log('failed');
});
}
谢谢,这很好,但它无法实现移动领域,因为移动领域非常狭窄,您需要在url中进行查询,对吗?像localhost?mobile=9809
现在一切都很好,但是我的表单没有提交任何字段,我得到了500个错误。我在提交数据时有没有做错什么?告诉我什么错误?你的getting check i network Tab我看到它说我的控制器中缺少移动字段,当我登录手机时,它什么也不打印,当我向它发出警报时,它是一个空警报
export default {
props: [
],
data: function () {
return {
}
},
methods: {
sendContactFormServer() {
axios({
method: 'POST',
url: '/customer/send-sms',
data: {
"mobile": this.form.mobile,
},
headers: {
'Content-Type': 'appllication/json',
'Accept': 'application/json',
}
})
.then(window.location.href = "/")
.catch(error => console.log(error))
},
submitMobile: function() {
this.$http.post('/customer/send-sms', this.formData).then(function(response) {
console.log(response);
}, function() {
console.log('failed');
});
}
}
}