1

cuando envío los datos del formulario, el controlador los reconoce vacíos.

public function store(Request $request)
    {
        //

        $this->validate($request,[
            'PERS_varDNI' => 'required',
            'PERS_varApPaterno' => 'required',
            'PERS_varApMaterno' => 'required',
            'PERS_varNombres' => 'required',
        ]);

        Persona::create($request->all());


        return;
    }

The given data was invalid.{ "PERS_varDNI": [ "The p e r s var d n i field is required." ], "PERS_varApPaterno": [ "The p e r s var ap paterno field is required." ], "PERS_varApMaterno": [ "The p e r s var ap materno field is required." ], "PERS_varNombres": [ "The p e r s var nombres field is required." ] }

aca es donde envio los datos

const app = new Vue({
    el: '#v_pers',
    created: function(){
        this.getPersonas();     
    },
    data:{
        personas:[],
        newPersona:{PERS_varDNI: '', PERS_varApPaterno: '', PERS_varApMaterno: '', PERS_varNombres: ''},
        errors:[]
    },
createPersona: function(){
            var url='personas';            
            axios.post(url,{
                persona: this.newPersona
            }).then(response=>{
                this.getPersonas();
                this.newPersona={PERS_varDNI: '', PERS_varApPaterno: '', PERS_varApMaterno: '', PERS_varNombres: ''},
                this.errors=[];
                $('#createPersona').modal('hide');
                toastr.success('Nueva persona creada con exíto');
            }).catch(error=>{
                this.errors=error.response.data
            });
        }

esta es la vista de donde envío los datos

<form method="POST" v-on:submit.prevent="createPersona">
    <div class="modal fade" id="createPersona">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4>Nueva persona</h4>
                </div>
                <div class="modal-body">
                    <label for="PERS_varDNI">DNI</label>
                    <input type="number" name="PERS_varDNI" class="form-control" v-model="newPersona.PERS_varDNI">
                    <label for="PERS_varNombres">Nombres</label>
                    <input type="text" name="PERS_varNombres" class="form-control" v-model="newPersona.PERS_varNombres">
                    <label for="PERS_varApPAterno">Apellido Paterno</label>
                    <input type="text" name="PERS_varApPAterno" class="form-control" v-model="newPersona.PERS_varApPaterno">
                    <label for="PERS_varApMaterno">Apellido Materno</label>
                    <input type="text" name="PERS_varApMaterno" class="form-control" v-model="newPersona.PERS_varApMaterno">
                    <span v-for="error in errors" class="text-danger">@{{ error }}</span>
                </div>
                <div class="modal-footer">
                    <input type="submit" class="btn btn-primary" value="Guardar">
                </div>
            </div>
        </div>  
    </div>
</form>

¿alguna idea de porque no se envían los datos? pd: cuando uso alert(this.newPersona.PERS_varDNI); en la funcion createPersona ahí me aparece el dato de dni normal

4
  • 1
    podes agregar antes de llamar a axios algo asi? var persona: this.newPersona; console.debug(persona) y verificar que exactamente tenes los datos donde vos los queres?
    – gbianchi
    Commented el 23 mar. 2018 a las 14:15
  • @gbianchi gracias, aunque no fue la respuesta me ayudo. solo hice antes del axios var persona=this.newPersona; luego en axios enviaba: axios.post(url, persona ) y funciono
    – hans
    Commented el 23 mar. 2018 a las 14:32
  • porque el orden de ejecucion, en este caso, altera el resultado... seguramente estaba haciendo la llamada a axios antes de pasar la variable reactiva a persona ;)
    – gbianchi
    Commented el 23 mar. 2018 a las 14:33
  • persona no existia, por eso iva como vacia; al declararla y asginarle un valor recien podia recuperar todo los valores
    – hans
    Commented el 23 mar. 2018 a las 14:44

1 respuesta 1

1

lo solucione de 2 maneras (el problema es que el request no reconocia

persona

así que siempre se enviaba vacía, con ayuda de @gbianchi agregue :

var persona=this.newPersona;

y despues solo envie esto y funciono

createPersona: function(){
            var url='personas';    
            var persona=this.newPersona;      
            axios.post(url,
                persona
            ).then(response=>{
                this.getPersonas();
                this.newPersona={PERS_varDNI: '', PERS_varApPaterno: '', PERS_varApMaterno: '', PERS_varNombres: ''},
                this.errors=[];
                $('#createPersona').modal('hide');
                toastr.success('Nueva persona creada con exíto');
            }).catch(error=>{
                this.errors=error.response.data
            });
        }

también se puede hacer de frente con las variable que se solicitan en el request de esta forma; al enviar el post a axios solo agregue: axios.post(url,{

PERS_varDNI: this.newPersona.PERS_varDNI, PERS_varApPaterno: this.newPersona.PERS_varApPaterno, PERS_varApMaterno: this.newPersona.PERS_varApMaterno, PERS_varNombres: this.newPersona.PERS_varNombres,

}) y funciono también.

createPersona: function(){
            var url='personas';  
            alert(this.newPersona.PERS_varDNI);   
            var persona=this.newPersona;
            console.debug(persona);       
            axios.post(url,{
                PERS_varDNI: this.newPersona.PERS_varDNI,
                PERS_varApPaterno: this.newPersona.PERS_varApPaterno,
                PERS_varApMaterno: this.newPersona.PERS_varApMaterno,
                PERS_varNombres: this.newPersona.PERS_varNombres,
            }).then(response=>{
                this.getPersonas();
                this.newPersona={PERS_varDNI: '', PERS_varApPaterno: '', PERS_varApMaterno: '', PERS_varNombres: ''},
                this.errors=[];
                $('#createPersona').modal('hide');
                toastr.success('Nueva persona creada con exíto');
            }).catch(error=>{
                this.errors=error.response.data
            });
        }
2
  • ESto pasa porque el orden de asignacion de VUE no asegura que reactivamente va a pasar la variable del data a la variable que esta en la funcion, antes de hacer la llamada a axios.
    – gbianchi
    Commented el 23 mar. 2018 a las 14:44
  • 1
    y recuerda aceptar la respuesta en 24 hs!! ( y avisame asi saco este comentario)
    – gbianchi
    Commented el 23 mar. 2018 a las 14:45

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.