Filtro de búsqueda de Vuejs

No dejes de compartir nuestra página y códigos con otro, apóyanos para hacer crecer esta comunidad.

Solución:

Puedes usar el includes() función de la array para buscar cualquier posición en una oración o frase.

new Vue(
  el: '#app',
  data() 
    return 
        searchQuery: null,
        resources:[
            title:"ABE Attendance",uri:"aaaa.com",category:"a",icon:null,
            title:"Accounting Services",uri:"aaaa.com",category:"a",icon:null,
            title:"Administration",uri:"aaaa.com",category:"a",icon:null,
            title:"Advanced Student Lookup",uri:"bbbb.com",category:"b",icon:null,
            title:"Art & Sciences",uri:"bbbb.com",category:"b",icon:null,
            title:"Auxiliares Services",uri:"bbbb.com",category:"b",icon:null,
            title:"Basic Skills",uri:"cccc.com",category:"c",icon:null,
            title:"Board of Trustees",uri:"dddd.com",category:"d",icon:null
        ]
    ;
  ,
  computed: 
    resultQuery()
      if(this.searchQuery)
      return this.resources.filter((item)=>
        return this.searchQuery.toLowerCase().split(' ').every(v => item.title.toLowerCase().includes(v))
      )
      else
        return this.resources;
      
    
  
 

)

   

   

          All Resources
            

                 

                     
                
                        
            
        

            

                

                    

                         
Resource
                    
                
                

                    

                        
item.title
                    
                
            
        
   
   

Basado en esta respuesta → Palabra clave de búsqueda de Vue.js en array

Podrías usar computed propiedad para este caso, así que creé uno llamado filteredResources que se utilizará en v-for bucle, había usado datos ficticios, pero podrías mantener tu resources declarado vacío y llamar a una función de promesa para completarlo created hook, verifique este código si prefiere un componente de archivo único o el siguiente código si está usando Vue a través de CDN

new Vue(
  el: '#app',
  data() 
    return 
      searchQuery:'',
    resources:[
    title:"aaa",uri:"aaaa.com",category:"a",icon:null,
     title:"add",uri:"aaaa.com",category:"a",icon:null,
      title:"aff",uri:"aaaa.com",category:"a",icon:null,
    title:"bbb",uri:"bbbb.com",category:"b",icon:null,
    title:"bdd",uri:"bbbb.com",category:"b",icon:null,
    title:"bsb",uri:"bbbb.com",category:"b",icon:null,
    title:"ccc",uri:"cccc.com",category:"c",icon:null,
    title:"ddd",uri:"dddd.com",category:"d",icon:null
    ]
    ;
  ,
  computed: 
    filteredResources ()
      if(this.searchQuery)
      return this.resources.filter((item)=>
        return item.title.startsWith(this.searchQuery);
      )
      else
        return this.resources;
      
    
  
 

)

   

                
 All Resources
                

                    

                        
                    
                        
                
                

                    

                        

                            

                                
Resource
                            
                        
                        

                            

                                
item.title
                            
                        
                    
                
            

Te mostramos las comentarios y valoraciones de los lectores

---

---

Utiliza Nuestro Buscador