Vuejs + Laravel array issue - laravel

Question

My problem is I'm trying to loop and array from Axios query into my blade template, query is giving me no errors but tells me is undefined multiple times on my select tag.
I have a simple Axios query from my Laravel Controller:
public function consultaPersonas()
{
$consulta = persona::all();
if(!$consulta) {
$consulta = ['error' => 'No hay registros'];
}
return $consulta;
}
this query will bring me this little array:
[
{"cedula":"15678453","nombre":"LUIS CHACON","edad":30},
{"cedula":"2536524","nombre":"MARIO ORTEGA","edad":21},
{"cedula":"25632541","nombre":"VANESSA ALCALA","edad":24}
]
This is the Select Tag i want to loop:
<select class="form-control" v-model="nombre">
<option v-for="nom in nombre">#{{ nombre }}</option>
</select>
Here's 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? Thanks.

Answer 1

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

Answer 2

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