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?