1

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!

1
  • Tenes que seguir por el mismo camino. Si esos datos no los tenes, vas a buscarlos y los traes. Si los datos los tenes, con un v-if podrias pasarlos a otra propiedad que solo se muestre cuando tenes algo seleccionado.
    – gbianchi
    Commented el 14 nov. 2018 a las 13:31

1 respuesta 1

2

Mira ver si con este ejemplo puedes resolver tu problema, modifique un poco tu codigo, añadi un nuevo metodo llamado getInfo mediante el cual puedes asignarle a una propiedad nueva llamada selected cual de los nombres de tu primera lista seleccionastes y en la columna central muestro la informacion de ese elemento seleccionado.

CSS:

li.list-group-item.active > a { color: white; } 

HTML:

 <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>
                    <template v-for="(item, index) in buscarNombre">
                     <li :class="`list-group-item ${selected && item.id === selected.id ? active: ''}`">
                        {{index + 1}}<a href="javascript: void(0);" @click="getInfo(index)"> {{item.name}}</a>
                    </li> 
                  </template>
                </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, key) in selected">{{key}}: {{item}}</li>
                </ul>

            </div>

            <div class="class col-4 text-center">
                <h1>JSON</h1>
                <pre>
                {{$data}}
              </pre>
            </div>
        </div>
    </div>
</div>

JS:

const app = new Vue({
    el: '#app',
    data: {
        titulo: 'Agenda en VUE.js',
        txtBuscar: '',
        listaNombres: [],
        selected: null
    },
    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
            });
        },
      getInfo: function(index){
        this.selected = this.listaNombres[index];
      }
    },
    //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));
        },
      active: function(){
        return "active";
      }
    }
})

Aqui te dejo el fork ke hice de tu proyecto: https://codepen.io/vdariel90/pen/VVpdvz

EDICION: Voy a explicarte por pasos: el metodo getInfo recibe el indice actual de la iteracion del v-for y lo que hace es asignarle a selected el elemento de listaNombres con ese mismo indice, lo que quiere decir que al hacer click sobre cualkiera, tendras en selected los datos del que se le hizo click, entonces lo otro que no entendistes es que a la hora de establecerle la clase al li lo que hago es establecerle por defecto 'list-group-item' y en caso de que el id del elemento actual de la iteracion sea igual al que se ha seleccionado y exista un elemento seleccionado entonces le añado 'active', sino no le agrego nada y queda deseleccionado.

4
  • Muchas gracias, eso era lo que buscaba. Pero me doy cuenta que debo seguir aprendiendo y prácticando más ya que no entendí la parte más importante: <li :class="list-group-item ${selected && item.id === selected.id ? active: ''}"> {{index + 1}}<a href="javascript: void(0);" @click="getInfo(index)"> {{item.name}}</a> Pero bueno, ahora me pondré a investigar todo. Gracias por tu respuesta!
    – ZeR0ByTe
    Commented el 14 nov. 2018 a las 18:51
  • 1
    Te voy a explicar en la misma respuesta, echale un ojo Commented el 14 nov. 2018 a las 19:14
  • Muchas gracias por la explicación!! Espero algún día llegar a tu nivel jeje. Saludos!
    – ZeR0ByTe
    Commented el 14 nov. 2018 a las 20:23
  • Aunque no lo aparente para ti soy principiante con VueJs asi que no te falta mucho para estar donde estoy ;P Commented el 14 nov. 2018 a las 20:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.