1

Tengo un metodo de Laravel que me permite crear un objeto y guardarlo en la base de datos.

public function store(Request $request) {
    $this->validate($request,[
        'id_ubicacion' => 'required',
        'id_tipo_inmueble' => 'required',
        'nomenclatura' => 'required',
        'descripcion' => 'max: 100'
    ]);

    $createdProperty = Property::create($request->all());

    return $createdProperty->id;
}

Como se puede ver, el método me retorna un dato.

Este método lo llamo mediante vue.js:

createProperty: function() {
    var url = 'properties';
    axios.post(url, {
        nomenclatura: this.nomenclatura,
        id_ubicacion: this.id_ubicacion,
        id_tipo_inmueble: this.id_tipo_inmueble,
        area: this.area,
        descripcion: this.descripcion,
        coeficiente: this.coeficiente,
        chip_catastral: this.chip_catastral,
        matricula_inmobiliaria: this.matricula_inmobiliaria
    }).then(response => {
        //Aquí debería atrapar el valor que me devuelve el método de laravel
    })
}

Hecho esto, necesito llamar el valor que me retorna el método laravel y poder usarlo en el el componente de vue, pero no se como hacer esto.

3
  • y si le haces un console.log(response)? el 12 jul. 2019 a las 17:54
  • Si me funciono, sucede que guarde la información en una variable, e imprimi la variable, pero no tuve resultado, pero si funciona el response.data, muchas gracias el 12 jul. 2019 a las 18:01
  • 1
    Axios tiene una estructura de respuesta donde el response esta compuesto por varias propiedades como lo son el status, lo que deberías hacer es obtener de la propiedad data lo que estas respondiendo desde tu back. en este caso response.data.algo el 12 jul. 2019 a las 18:02

3 respuestas 3

0

La versión actual de axios retorna un objeto con los datos o con errores en caso de que los haya. response.data devuelve la información que necesitas junto con response.status.

El objeto consiste en:

{
  data: {}, // Son los datos con los que el servidor responde.
  status: 200, // Es el estado HTTP de la respuesta del servidor.
  statusText: 'OK', // Es el texto del estado HTTP de la respuesta del servidor.
  headers: {}, // Los headers con los cuales el servidor contesta.
  config: {} // Los config que se le dieron a AXIOS para la consulta.
}

Te recomiendo utilizar destructuración para utilizar directamente el objeto data sin escribir response.data. Seria de la siguiente manera:

axios.post(url, {...})
.then( ({data} ) => {
   // ahora puedes utilizar data directamente. Ej: this.variable = data;
});

Y por último, debes poner un .catch() después del then para retornar los errores en caso de que existan. Con algo como esto bastaría:

.catch(function(error) {
    console.log(error);
});

Espero te sirva, saludos.

0

Voy a intentar explicarme lo mejor posible. Según estas mostrando en tu Controller retornas: return $createdProperty->id; Siendo este retorno tu Request que esta a la espera de ser recogida dicha respuesta por axios. Entonces tu axios seria de la siguiente forma:

axios.post(url, {...})
.then( (response ) => {
  Tu_Var_Vue = response;
});

Donde Tu_Var_Vue puede ser una variable perteneciente al 'data' o tambien al 'state' de vuex. Asi recoges el valor retornado de tu Controller.

-1

Lo que necesitas es igualar tu variable con lo que traiga

response.data
1
  • 1
    Esto es la respuesta, pero el sistema la marca como de baja calidad debido a su extension. Podrias explicar un poco mas sobre axios y el objeto que devuelve? mira por favor el recorrido de bienvenida y tambien Cómo responder
    – gbianchi
    el 12 jul. 2019 a las 19:12

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.