Написать фильтр для checkbox во Vue.js

#javascript #html #vuejs #сортировка

Нужно выводить данные по определенным требованиям - по полу.






Данные о людях хранятся в store(vuex) -  

guides:   [
      { id: 1,popularGuide: true, name: 'Karina',  rate: '41',gender: 'female', photo:
require('./assets/img/person1.jpg')},  
      { id: 2,popularGuide: true,name: 'Nicolas', rate: '32', gender: 'male',photo:
require('./assets/img/person2.jpg') },


При нажатии на определенный checkbox вывести весь список, или только женщин, или
только мужчин.  

Сюда выводятся данные:

  и так далее.

Я пробовала и filters и через getters и через библиотеку fuse.js. 

Пример из одной моей попытки:

   if ( '' !== gender ) {
      // 
      guides= guides.filter( function ( guide) {
        return guide.gender === gender;
      } );
    }


Подскажите, через что лучше сделать выборку и как это сделать?
    

Ответы

Ответ 1

Вот один из вариантов для решения вашей задачи:



   
    
    
    
    
    

    
    
    

    
    
    
    
    
    
    

      
        
          
            

            
              

                
{{guide.name}}
                
 {{ guide.gender }} 
              
            
    		
    		
    		  
    		  
    			favorite  {{ guide.rate }} 
    		  
    		
          
        
       

      
    
    
    


    
    
    
    
    
    


Ответ 2

Геттеры применяются когда нужно вернуть измененную информацию из хранилища, например
отфильтровать список. В вашем случае необходимо передавать аргумент геттеру, т.к. нужен
массив по указанному критерию: gender.

// ex.: store.js

getters: {
  getByGender: state => gender => {
    // Если не выбран пол, возвращаем весь список.
    // Либо производим фильтрацию по указанному критерию.
    return gender ?
      state.guides.filter(guide => guide.gender === gender) :
      state.guides;
  }
}


Для доступа к геттеру из компонента используется локальное вычисляемой свойство:

// ex.: component.vue

data() {
  return {
    // Пол. Изначально не выбран
    // и определен как пустая строка.
    gender: ''
  }
},

computed: {
  // Смешиваем результат mapGetters с внешним объектом computed.
  // Теперь будет доступна функция `this.getByGender`.
  ...mapGetters([
    'getByGender'
  ]),

  // Локальное вычисляемое свойство.
  filteredGuides() {
    return this.getByGender(this.gender);
  }
}









  
  
  




  {{ guide.name }} [{{ guide.gender }}]



Демо:



const guides = [{
  id: 1,
  name: 'Karina',
  gender: 'female',
}, {
  id: 2,
  name: 'Nicolas',
  gender: 'male',
}];

const store = new Vuex.Store({
  state: {
    guides: guides
  },

  // Геттеры применяются когда нужно
  // вернуть измененную информацию из хранилища.
  // https://vuex.vuejs.org/ru/guide/getters.html#стиnь-обращения-как-к-методам
  getters: {
    getByGender: state => gender => {
      // Если не выбран пол, возвращаем весь список.
      // Либо производим фильтрацию по указанному критерию.
      return gender ?
        state.guides.filter(guide => guide.gender === gender) :
        state.guides;
    }
  }
})

new Vue({
  el: '#app',
  store,
  data: {
    // Пол. Изначально не выбран
    // и определен как пустая строка.
    gender: ''
  },

  computed: {
    // Смешиваем результат mapGetters с внешним объектом computed.
    // Теперь будет доступна функция `this.getByGender`.
    // При модульном подходе без `Vuex.` только - `...mapGetters`.
    ...Vuex.mapGetters([
      'getByGender'
    ]),

    // Локальное вычисляемое свойство.
    filteredGuides() {
      return this.getByGender(this.gender);
    }
  }
})





  
    

      
      
      
      

      
      
        
        
        
      

      
      
        {{ guide.name }} [{{ guide.gender }}]
      
    
  









PS В заголовке и тексте вопроса фигурирует checkbox, но в одном из фрагментов кода
v-radio.