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?
app.nombre = datos
? La variablevalidar
es un booleano.