Страницы

Поиск по вопросам

воскресенье, 9 февраля 2020 г.

Написать фильтр для 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



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

Steve

male
favorite 41

Steve

male
favorite 32

Steve

male
favorite 56

Marilyn

female
favorite 112

Marilyn

female
favorite 222

Marilyn

female
favorite 333

Steve

male
favorite 46

Steve

male
favorite 334


Ответ 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.

Комментариев нет:

Отправить комментарий