Estoy desarrollando una aplicación web, con Laravel y vueJS, pero a la hora de enviar mi formulario y recibir los parámetros en el controlador, mes está dando un error 405.
Por ahora no quiero crear componentes, solo hacer operaciones con la base de datos, insertar y actualizar, lo podría hacer con jquery, pero quiero cambiar y aprender otras tecnologías. El problema es que cuando envío mi formulario, siempre me devuelve un error 405, tengo definida la ruta para la vista y también para hacer las operaciones, un controlador para las operaciones que voy a hacer a posteriori, etc, pero siempre el 405. Adjunto mi código actual.
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('usuarios-component', require('./components/usuariosComponent.vue').default);
// inicio de VUE
const app = new Vue({
el: '#contenedorVue',
data:{
id: '',
nombreUsuario: '',
email: '',
password: '',
direccion: '',
token: '',
arrayTasks:[],
},
methods: {
enviar(){
let url = '/actualizarDatos';
axios.post(url, {
id: this.id,
nombreUsuario: this.nombreUsuario,
email: this.email,
password: this.password,
direccion: this.direccion,
token: this.token,
}).then(function(response){
this.arrayTasks = response.data;
}).catch(function(error){
console.log(error);
})
}
}
});
formulario web
@extends('layouts.app')
@section('content')
@include('layouts.sidebar')
<!-- SE ESTABLECE V-MODEL para usarlo con vue, es como el ID -->
<div id="contenedorVue">
<div class="d-flex flex-row justify-content-center">
<form method="post">
<input type="hidden" v-model="token" value="{{csrf_token()}}">
<div class="form-row">
<div class="col">
<label for="email">Nombre</label>
<input type="text" class="form-control" v-model="nombreUsuario" value="{{$usuario->nombre}}">
</div>
<div class="col">
<label for="email">Email</label>
<input type="email" class="form-control" v-model="email" aria-describedby="emailHelp" value="{{$usuario->email}}">
</div>
</div>
<div class="form-row">
<div class="col">
<label for="password">Contraseña</label>
<input type="password" class="form-control" v-model="password" value="{{$usuario->password}}">
</div>
</div>
<div class="form-row">
<div class="col">
<label for="direccion">Direccion</label>
<textarea v-model="direccion" class="md-textarea form-control" rows="3">
{{$usuario->direccion}}
</textarea>
<input type="hidden" value="{{$usuario->id}}" v-model="id">
</div>
</div>
<!-- EMPEZAMOS LA FUNCIONALIDAD CON VUE DE ESTA MANERA LE DAMOS FUNCIONALIDAD AL BOTON-->
<button class="btn btn-primary mt-5" @click="enviar">Actualizar</button>
</form>
</div>
</div>
@endsection
error consola
1:1 POST http://www.bonos.local/datosPersonales/1 405 (Method Not Allowed)
error post laravel
Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException
The POST method is not supported for this route. Supported methods: GET, HEAD.
rutas
/* RUTAS PARA HOME USUARIO */
Route::get('/datosPersonales/{id}', 'HomeController@datosPersonales')-
>name('datosPersonales');
Route::post('/actualizarDatos', 'UsuariosController@actualizarDatosPersonales')->name('actualizarDatosPersonales');