Estoy tratando de aprender y hacer una agenda muy muy sencilla en VUE.js. He podido listar los usuarios trayendolos con Axios. Lo que me gustaría implementar ahora, es al hacer click en un usuario, en la columna del medio (Más info) me traiga su email, telefono, dirección.
Pero ni se como empezar...
Aquí los códigos...
<div id="app">
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-4 text-center">
<h1 v-if="txtBuscar===''">{{titulo}}</h1>
<h1 v-else>Buscando...</h1>
<ul class="list-group">
<li class="list-group-item bg-dark">
<input type="text" v-model="txtBuscar" placeholder="Busque un contacto...">
</li>
<li class="list-group-item" v-for="(item, index) in buscarNombre">
{{index + 1}}<a href=""> {{item.name}}</a>
</li>
</ul>
</div>
<div class="class col-4 text-center">
<h1>MÁS INFO</h1>
<ul class="list-group">
<li class="list-group-item" v-for="item in listaNombres">{{item.name}}</li>
</ul>
</div>
<div class="class col-4 text-center">
<h1>JSON</h1>
<pre>
{{$data}}
</pre>
</div>
</div>
</div>
</div>
const app = new Vue({
el: '#app',
data: {
titulo: 'Agenda en VUE.js',
txtBuscar: '',
listaNombres: []
},
methods: {
//Trae los datos de la URL con AXIOS
traerDatos: function () {
var urlUsers = 'https://jsonplaceholder.typicode.com/users';
axios.get(urlUsers).then(response => {
//Almacena los datos que trae en ListaNombres.
this.listaNombres = response.data
});
}
},
//Trae los datos al iniciar...
beforeMount(){
this.traerDatos()
},
//Realiza el filtro al ingresar el nombre...
computed: {
buscarNombre: function () {
return this.listaNombres.filter((item) => item.name.includes(this.txtBuscar));
}
}
})
Aquí dejo el codepen: https://codepen.io/ZeR0ByTe/pen/gQmeLY
Muchas gracias!