我试图使用Axios使用Vue存储表单数据。
这是vue模板:
<template id="AddEmployee">
<div>
<h3> Add new post</h3>
<form v-on:submit.prevent="createEmployee">
<div class="form-group">
<label> name</label>
<input type="text" v-model="employee.name" class="form-control" required placeholder="">
</div>
<div class="form-group">
<label> Email</label>
<input type="email" v-model="employee.email" class="form-control" required placeholder="">
</div>
<button type="submit" class="btn btn-xs btn-primary"> Create </button>
<router-link class="btn btn-xs btn-warning" v-bind:to="'/crud/public/'"> Cancel</router-link>
</form>
</div>
</template>
<script>
export default {
data:function()
{
return {employee: { name:'', email:''}}
},
methods:{
createEmployee:function()
{
let uri = 'http://localhost/crud/public/employees';
Axios.post(uri, this.employee).then((response)=>{
this.$router.push({name: 'Employees'})
})
}
}
}
</script>
这是我的路线:
Route::resource('/employees','EmployeeController');
这是控制器部分:
public function store(Request $request)
{
$this->validate($request, [
'name' => 'required',
'email' => 'required',
]);
$create = Employee::create($request->all());
return response()->json(['status' => 'success','msg'=>'Employee created successfully']);
}
以下是app.js
中定义的路线const routes = [
{
name : 'Employees',
path: '/crud/public/',
component : Employees
},
{
name : 'AddEmployee',
path: '/crud/public/AddEmployee',
component : AddEmployee
}
]
但问题是它将我重定向到Employees路由,但没有存储在数据库中。