Vue

Pokemon filter

by Natanhel

HTML

<template id="app">
  <div>
    <h1>
      filter by gen:
    </h1>
    <textarea v-model="text" name="filter" cols="20" rows="1"></textarea>
    <div class="pokemon" v-for="pokemon in filteredPokemon" :key="pokemon.id">
      <h2>name: {{ pokemon.name }}</h2> <h2>gen: {{ pokemon.gen }}</h2>    
    </div>
  </div>
</template>

CSS

.pokemon{
  padding: 5px;
}

Vue

new Vue({
  el: "#app",  
  data(){
    return{
      text: '',
      pokemons: [
                  {gen: 'gen1', name: 'psyduck', id: '1'},
                  {gen: 'gen1', name: 'charizard', id: '2'},
                  {gen: 'gen1', name: 'pikachu', id: '3'},
                  {gen: 'gen2', name: 'togapi', id: '4'}   
                ]
    }
  },
  computed: {
    filteredPokemon() {
    	if(this.text === '') return this.pokemons
      return this.pokemons.filter(x=>x.gen === this.text)
    }
  }
})