2.- Formas de realizar Filter Vue

Crear un entorno Vue.

 $ vue create nombre_de_la_carpeta

Vue-axios

Siempre verificar que versión de Vue utilizan https://www.npmjs.com/package/vue-axios (opens new window)

npm install --save axios vue-axios

En el documento main.js copiamos estas lineas

import axios from 'axios'
import VueAxios from 'vue-axios'
 
Vue.use(VueAxios, axios)

Realizando filter v1

Código para el template

    <template>
      <div>
         <img class="logo" src="@/assets/logo.png" alt="">
         <h1>Characters</h1>
         <input 
         type="text" 
         v-model="search" 
         placeholder="Search">
         <div class="content">
           <div class="content-characters" 
           v-for="character in filterSearch" 
           :key="character.id">
           <div class="character">
             <img :src="character.image" alt="">
           <div class="info-character">
             <h2> {{ character.name}}</h2>
             <h4> {{ character.species}}</h4>
             <h4> {{ character.status}}</h4>
           </div>
           </div>
       </div>
     </div>
    </div>
  </template>

Código para el Script

<script>
// @ is an alias to /src
import axios from 'axios'

export default {
  name: 'app',
  components: {
  },
  data(){
    return {
      search: '',
      characters: []
    }
  },
  mounted(){
    this.getTodos();
  },
  methods: {
    getTodos(){
      axios
      .get('https://rickandmortyapi.com/api/character/')
      .then(res => {
        (this.characters = res.data.results)
      })
      .catch(e => {
        console.log(e)
      })
    }
  },
  computed: {
    filterSearch(){
      return this.characters.filter((character) => {
        return character.name.toLowerCase().includes(this.search.toLowerCase())
      })
    }
  },
 

}
</script>

Ejemplo de lo realizado: https://rickandmorty-api-romacode.netlify.app/ (opens new window)

Repositorio Github: https://github.com/romadesign/app-rick-and-morty (opens new window)