[Vuejs]-Vuejs + Laravel array issue

0👍

js:

created():
    axios.get('http://localhost/miapp/public/personas/mostrar')
    .then(function (response){
        this.nombre = response.data;
    }).catch(function (error) {
        console.log(error);
    })

html:

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

Next, you transfer from the created method call axios to methods, and in created call this method. This initializes your initial data

0👍

I find out what was wrong,

I had two problems, one was my view tags variables, this is the right way since i need to loop through my nom object with his index like this:

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

the second problem was my return at my vuejs file, i was returning one single output into a loop, this is the right way:

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

Leave a comment