Pokemon Options - Tylung/vue-apuntes GitHub Wiki

Dentro del div, se crea una lista desordenada y los li tienen la directiva v-for para crear el nombre de un pokemon en cada li, esto se guia por el id de la prop pokemon, por ello solo crea 4 li, es el numero de pokemones. Ademas espera un click y lanza un $emit, que emite el evento selection-pokemon del PokemonPage.vue y le manda como parametro el pokemon.id del li del pokemon que seleccionaste, haciendo esto podemos saber exactamente que pokemon selecciono el usuario.

<div class="options-container">
        <ul>
        <li 
            v-for="pokemon in pokemons"
            :key="pokemon.id"                
            @click="$emit( 'selection-pokemon', pokemon.id )">
                  {{ pokemon.name }}
            </li>
        </ul>
</div>

En el export default solo se declara la prop reactiva pokemons que es un arreglo y es required, estos pokemons son el pokemonArr que le pasamos como atributo a este componente

export default {
    props: {
        pokemons: {
            type: Array,
            required: true
        }
    },
}

En los estilos solo se le quita el formato de lista, centra las imagenes y cambia el color de fondo de los li cuando hay un hover

<style scope>

ul {
    list-style-type: none;
}
li {
    background-color: white;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    cursor: pointer;
    margin-bottom: 10px;
    width: 250px;
}

li:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.options-container {
    display: flex;
    justify-content: center;
}

</style>