0

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');
6
  • el error es claro... haces un post a una ruta que no es post... usa axios.get y listo
    – gbianchi
    Commented el 19 oct. 2020 a las 18:49
  • nos estas mostrando dos rutas distintas
    – gbianchi
    Commented el 19 oct. 2020 a las 18:55
  • No entiendo nada. Tu error es en otra ruta, no la que pones de ejemplo...
    – gbianchi
    Commented el 19 oct. 2020 a las 18:57
  • @gbianchi a ver. tengo esa ruta Route::post('/actualizarDatos/{id}', 'UusuariosController@actualizarDatosPersonales')->name('actualizarDatosPersonales'); la cual le envio el id del usuario a modificar. En el post de axios, tengo /actualizar datos, porque quizás no se pasarle el parámetro a esa url con VUE, si te fijas en vue le doy el id en el data, que no se si es correcto.
    – scorpions
    Commented el 19 oct. 2020 a las 19:00
  • @BetaM listo ya lo he modificado y también mi app.js
    – scorpions
    Commented el 19 oct. 2020 a las 19:05

1 respuesta 1

1

el problema es que tu ruta esta mal, si estas enviando por post, no puedes enviar parametros por la url, por algo estas enviando por post, entonces en tu ruta coloca

Route::post('/actualizarDatos', 'UsuariosController@actualizarDatosPersonales')->name('actualizarDatosPersonales');

y en tu archivo vue

methods: {
        enviar(){
            // la url actualizada
            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);
            })
        }
    }

cuando recibas en el controlador ejecuta dd($request->all()); para verificar que los datos esten llegando bien, en caso de que si solo harias $id = $request->id; y con eso puedes verificar el id del usuario y actualizas sus datos.

Saludos

7
  • si tienes razon, se me olvido borrar jaja ya edite el comentario, por cierto tambien en tu controlador coloca para recibir los parametros del request public function micontrolador(Request $request) Commented el 19 oct. 2020 a las 20:26
  • has la prueba para que veas, lo que sucede es lo siguiente el metodo get es para enviar informacion a traves de la url y el metodo post envia informacion oculta en la url, entonces si tu le dices es de metodo post pero le estas enviando el id por el parametro get entonces es como una confusion para laravel, de cierta manera estas contradiciendo. Has la prueba con el codigo que te pase. Commented el 19 oct. 2020 a las 20:28
  • 1
    no. la diferencia entre post y get es mas teorica que esto.se supone que get es para obtener datos de un controlador, y post es para pasar informacion al mismo..
    – gbianchi
    Commented el 19 oct. 2020 a las 21:10
  • no, cuando tu haces un metodo get el controlador lo que hara es tomar la informacion que viene de la url, y cuando es por metodo post viajan en las cabeceras del HTTP. Has la prueba y me dices si te funciono o no. Commented el 19 oct. 2020 a las 22:06
  • 1
    yo no hice la pregunta.. te aclaro la diferencia teorica.. por post o get podes hacer lo que quieras en tu controlador.. se supone teoricamente que get es para obtener datos y post es para guardar datos.. en get, lo que mandas se ve.. en post, no se ve, aunque en la consola del navegador ves todo.
    – gbianchi
    Commented el 19 oct. 2020 a las 22:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.