Level 73
Shouldn't the url be /post/store and not /post.store?
Jun 8, 2022
6
Level 4
Axios cant post data on resource controller
I am trying to pass data from vue to laravel controller with axios.post but i get errorr 404 not found on my chrome console
import axios from 'axios'
export default {
data() {
return {
title: '',
comment: '',
}
},
methods: {
postForm() {
axios.post({
method: 'post',
url: '/post.store',
data: {
title: this.title,
comment: this.comment,
}
}).then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
},
}
Route::resource('post', 'App\Http\Controllers\PostController');
//Route:list
POST | post | post.store | App\Http\Controllers\PostController@store | web |
| | GET|HEAD | post | post.index | App\Http\Controllers\PostController@index | web |
| | GET|HEAD | post/create | post.create | App\Http\Controllers\PostController@create | web |
| | GET|HEAD | post/{post} | post.show | App\Http\Controllers\PostController@show | web |
| | PUT|PATCH | post/{post} | post.update | App\Http\Controllers\PostController@update | web |
| | DELETE | post/{post} | post.destroy | App\Http\Controllers\PostController@destroy | web |
| | GET|HEAD | post/{post}/edit | post.edit | App\Http\Controllers\PostController@edit
Laravel Controller
public function store(Request $request)
{
$request->validate([
'title' => 'required|max:255',
'comment' => 'required',
]);
$title = $request->input('title');
$comment = $request->input('comment');
Post::create(['title' => $title, 'comment' => $comment]);
return redirect() ->back() ->with("success", "Post created success!");
}
Have i done something wrong?
Level 4
@Tray2 Now i get app.js:3408 POST http://127.0.0.1:8000/[object%20Object] 404 (Not Found)
Level 15
The post URL path isn't /post.store. That's the route name, used by for instance Laravels' route function. That is handled on the server-side and vue is client-side. Unless you pass down the post path into your vue component you'll have to enter the actual URL path and not the route name.
In this case, you can see the actual URL path after the method in the route:list. In your case it's /post.
Level 4
@thinkverse I tryed like this /post but i get same error on console
POST http://127.0.0.1:8000/[object%20Object] 404 (Not Found)
Level 4
I fond the solution . I just remove .post after axios on vue script
axios({
method: 'post',
url: '/post',
data: {
title: this.title,
comment: this.comment,
}
}).then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
Level 15
@usertxr Mark the solution for other users who might have the same problem down the line.
Please or to participate in this conversation.