1

Mi problema es que al hacer una consulta con Axios de Vue.js obtengo los datos de la consulta. Sin embargo, al mandar los valores hacia mi vista e iterarlos en una etiqueta select, me muestra valores "undefined".

Esta es mi simple consulta desde el controlador:

public function consultaPersonas()
{
  $consulta = persona::all();
  if(!$consulta)
  {
      $consulta = ['error' => 'No hay registros'];
  }
  return $consulta;
}

Este es el pequeño arreglo que me trae:

[{"cedula":"15678453","nombre":"LUIS CHACON","edad":30},{"cedula":"2536524","nombre":"MARIO ORTEGA","edad":21},{"cedula":"25632541","nombre":"VANESSA ALCALA","edad":24}]

Esta es la etiqueta HTML:

<select class="form-control" v-model="nombre">
    <option v-for="nom in nombre">@{{ nombre }}</option>
</select>

Este es mi código Vuejs:

var app = new Vue({
    el:'#root',
    data: {
        cedula:'',
        nombre:[],
    },
    watch: {
        cedula: function () {
            this.nombre = ''
            if(this.cedula.length == 1) {
                this.buscarCedula()
                this.nombre = "Consultando cédula...";
            }
        }
    },
    methods: {
        buscarCedula: _.debounce(function (){
            axios.get('http://localhost/miapp/public/personas/mostrar')
            .then(function (response){
                let datos = response.data;
                let validar = datos.error;
                if(!validar) {
                    app.nombre =
                    datos.cedula + ' - ' +
                    datos.nombre + ' - ' +
                    datos.edad;
                }
                else
                {
                    app.nombre = validar;
                }
            })
            .catch(function (error){
                app.nombre = error;
            })
        }, 500)
    }
})

¿Qué estoy haciendo mal?

3
  • La consola te marca algún error en concreto? Revisa el v-for, creo ue deberia ser @{{ nom }}
    – Xerif
    el 13 jun. 2017 a las 13:09
  • ¿No sería app.nombre = datos? La variable validar es un booleano.
    – gugadev
    el 14 jun. 2017 a las 18:06
  • Si, eso es correcto, esa es la manera de llamar al objeto y sus indices en el documento HTML, gracias.
    – Daniel
    el 16 jun. 2017 a las 0:53

3 respuestas 3

2

veo un par de cosas en tu código así que vamos por partes

1) Por qué me muestra undefined?

Como @xerif dijo, el options esta recorriendo la variable nombre y cada nombre le das el valor nom, así que lo que tenes que mostrar es nom, PERO calculo que algún dato de nom, no el json entero, por lo que quedaría:

<select class="form-control" v-model="elegido">
    <option v-for="nom in nombre">@{{ nom.nombre }}</option>
</select>

2) v-model del select

el v-model del select es una variable que almacena el valor del select elegido, no deberias usar la misma variable para guardar un objeto que vas a iterar para generar el options y el v-model, no se que pasaría al seleccionar un nombre, pero no parece nada bueno. Si usas cualquier otra, como "elegido", ésta variable va a estar vacía hasta que selecciones un nombre en el option.

3) array vs dato único

Tu consulta devuelve un array. Deberías tener cuidado de devolver SIEMPRE un array para poder tener un código homogéneo. Por lo que tu código dentro de axios es invalido. podrias corregirlo asi:

let datos = response.data; //esto es un array
let validar = datos.error;
if(!validar) {
    app.personas = datos;
}

y el select:

<option v-for="persona in personas">@{{ persona.nombre }}</option>

4) response.success

Personalmente, prefiero todas mis llamadas a api tengan un flag que me diga si la llamada fue exitosa o no. Esto es personal, pero si hay que tener cuidado de no devolver cosas diferentes, como un texto o un objeto o un array:

public function consultaPersonas()
{
  $response = new stdClass();
  $response->success = false;
  $response->data = persona::all()
  if(!$response->data)
  {
      $response->error = 'No hay registros';
  } else {
      $response->success = true;
  }
  return $response;
}

No importa si es exitoso o no, siempre tenes un objeto devuelto, preguntas si response.success, si lo es haces response.data, si no lo es response.error

5) Cómo quedaría?

var app = new Vue({
    el:'#root',
    data: {
        cedula:'',
        elegido:'',
        personas:[],
        errors:[],
    },
    watch: {
        cedula: function () {
            this.nombre = ''
            if(this.cedula.length == 1) {
                this.buscarCedula()
                this.nombre = "Consultando cédula...";
            }
        }
    },
    methods: {
        buscarCedula: _.debounce(function (){
            let that = this;
            axios.get('http://localhost/miapp/public/personas/mostrar')
            .then(function (response){
                if(response.success) {
                    that.personas = response.data;
                } else {
                    that.errors.push(response.error);
                }
            })
            .catch(function (error){
                that.errors.push(error);
            })
        }, 500)
    }
})
3
  • Te dejo mis puntos por el curre de la respuesta, esperemos que al usuario le sirva. Un saludo.
    – Xerif
    el 14 jun. 2017 a las 18:25
  • Eso me sirvio mucho para encontrar la solucion a mi problema Gerardo Rosciano, muchas gracias por tu lección de Vuejs.
    – Daniel
    el 16 jun. 2017 a las 0:52
  • No hay problema @Daniel, solo te pido que si te parece correcta, marques mi respuesta como tal, o si solo te sirvió, le des un upvote. Gracias! el 16 jun. 2017 a las 12:22
0

Tu problema es que asignas un valor incorrecto a la colección:

else {
  // debes asignar datos
  app.nombre = validar;
}

La variable validar contiene un posible error que solo existe cuando no hayan registros.

0

Ya encontre la solucion a mi propio problema.

Tenia dos problemas, uno en el HTML al llamar al objeto y su indice, me funciono asi:

<select class="form-control" v-model="nombre">
    <option v-for="nom in nombre">@{{ nom.cedula }}</option>
</select>

El segundo problema era en mi documento JS cuando retornaba los valores hacia la vista, me funciono asi:

    var app = new Vue({
                el: '#root',
                data: {
                    cedula: '',
                    nombre: [],
                },
                watch: {
                    cedula: function() {
                        this.nombre = ''
                        if (this.cedula.length == 1) {
                            this.buscarCedula()
                            this.nombre = "Consultando cédula...";
                        }
                    }
                },
                methods: {
                    buscarCedula: _.debounce(function() {
                        axios.get('http://localhost/miapp/public/personas/mostrar')
                            .then(function(response) {

                                if (!response.data.error) {
                                    return app.nombre = response.data;

                                } else {
                                   return app.nombre = response.data.error;
                                }
                            })
                            .catch(function(error) {
                                app.nombre = error;
                            })
                    }, 500)
                }
)};

Muchas gracias a todos.

Tu Respuesta

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

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