Values undefined when iterating in a view of Vue.js

1

My problem is that when making a query with Axios de Vue.js I get the query data. However, by sending the values to my view and iterating them into a select tag, it shows me "undefined" values.

This is my simple query from the controller:

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

This is the little arrangement that brings me:

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

This is the HTML tag:

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

This is my Vuejs code:

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)
    }
})

What am I doing wrong?

    
asked by Daniel 13.06.2017 в 13:37
source

3 answers

1

I see a couple of things in your code so we go in parts

1) Why are you showing me undefined?

As @xerif said, the options are going through the name variable and each name you give the nom value, so what you have to show is nom, BUT I calculate that some nom data, not the whole json, so it would be:

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

2) select v-model

the v-model of the select is a variable that stores the value of the selected select, you should not use the same variable to save an object that you will iterate to generate the options and the v-model, I do not know what would happen when selecting a name, but it does not seem good at all. If you use any other, such as "chosen", this variable will be empty until you select a name in the option.

3) array vs unique data

Your query returns an array. You should be careful to ALWAYS return an array in order to have a homogeneous code. So your code within axes is invalid. you could correct it like this:

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

and the select:

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

4) response.success

Personally, I prefer all my calls to api have a flag that tells me if the call was successful or not. This is personal, but you have to be careful not to return different things, like a text or an object or an 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;
}

It does not matter if it is successful or not, you always have an object returned, questions if response.success, if it is you do response.data, if it is not response.error

5) How would it be?

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)
    }
})
    
answered by 14.06.2017 в 20:03
0

Your problem is that you assign an incorrect value to the collection:

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

The variable validar contains a possible error that only exists when there are no records.

    
answered by 14.06.2017 в 20:20
0

I already found the solution to my own problem.

I had two problems, one in the HTML when calling the object and its index, it worked like this:

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

The second problem was in my JS document when I returned the values to the view, it worked like this:

    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)
                }
)};

Thank you very much everyone.

    
answered by 16.06.2017 в 02:51