Problem with interpreting route resource type for the RelatedPeople model - vue.js

Question

Hypothesis: I think it is the pluralization of resource or model, I am not sure.
My code:
Route web:
Route::group(['middleware'=> 'auth'], function() {
Route::resource('relatedPersons', 'RelatedPeople\RelatedPeopleController')
->only(['store','update','destroy'])
->middleware('can:relatedPeoples');
});
Note: the model is relatedPeople, but for testing purposes in the definition of the route leave it like this relatedPersons.
RelatedPeople(Model):
<?php
namespace App;
use Carbon\Carbon;
use Illuminate\Database\Eloquent\Model;
class RelatedPeople extends Model
{
protected $fillable = [
'name',
'phone',
'email',
'detail',
'case_report_id'
];
public function getCreatedAtAttribute($value)
{
return Carbon::parse($value)->format('Y-m-d H:m');
}
public function getDetailAttribute($value)
{
return $value ?? "Sin detalle.";
}
}
RelatedPeopleController:
<?php
namespace App\Http\Controllers\RelatedPeople;
use App\Http\Controllers\Controller;
use App\RelatedPeople;
use Illuminate\Http\Request;
class RelatedPeopleController extends Controller
{
/**
* Store a newly created resource in storage.
*
* #param \Illuminate\Http\Request $request
* #return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$rules = [
'email'=> "required|unique:related_people"
];
$this->validate($request, $rules);
$relatedPeople = RelatedPeople::create($request->all());
return response()->json($relatedPeople, 200);
}
}
Frontend vuejs with axios:
onSubmit() {
let formData = new FormData(this.$refs.create)
formData.append('case_report_id', this.case_id)
axios.post('relatedPersons', formData).then( (response) => {
if ( response.status == 200 ) {
this.$emit('addRelatedPerson', response.data)
this.$toasterE.success("Related people create", { mark:1 })
this.$nextTick(() => {
this.$refs.form.reset()
this.form = form()
});
}
}).catch( (err) => {
this.exception(err)
})
}
The above code every time I run it goes into the catch and returns this error:
{"error": "The POST method is not supported for this route. Supported methods: GET, HEAD, PUT, PATCH, DELETE.", "code": 405}
Tests I've already done:
change resource name
In the model add table name protected $ table = "related_people"
Define a get (index) method to the controller to know that at least the request reaches the controller and only the GET method works, the rest do not work.
I will keep looking for a solution, thank you in advance.

Answer 1

Well after almost exploding my head I found that it was a mistake that the solution is in my face, not in my turquoise eyes but in front of my face.
The solution is:
Frontend vuejs with axios( before ):
onSubmit() {
let formData = new FormData(this.$refs.create)
formData.append('case_report_id', this.case_id)
axios.post('relatedPersons', formData).then( (response) => {
if ( response.status == 200 ) {
this.$emit('addRelatedPerson', response.data)
this.$toasterE.success("Related people create", { mark:1 })
this.$nextTick(() => {
this.$refs.form.reset()
this.form = form()
});
}
}).catch( (err) => {
this.exception(err)
})
}
Frontend vuejs with axios( solved ):
onSubmit() {
let formData = new FormData(this.$refs.create)
formData.append('case_report_id', this.case_id)
axios.post('/relatedPersons', formData).then( (response) => {
if ( response.status == 200 ) {
this.$emit('addRelatedPerson', response.data)
this.$toasterE.success("Related people create", { mark:1 })
this.$nextTick(() => {
this.$refs.form.reset()
this.form = form()
});
}
}).catch( (err) => {
this.exception(err)
})
}
If you haven't seen it yet, it's the route definition '/relatedPersons'
axios.post('/relatedPersons', formData).then( (response) => {
Now because of this problem, suppose I access the path axios.post('relatedPeoples', data) and the url of the application is test.dev/cases/1, the result of the request would be test.dev/cases/relatedPeoples and here the problem.
laravel tells me if the route exists but that method is not supported.
I hope my mistake helps many.