Почему фильтрация флажков не работает в VueJS? - PullRequest
Новая
       25

Почему фильтрация флажков не работает в VueJS?

0 голосов
/ 04 мая 2019

Уже 8 часов пытаюсь заставить это работать, но все равно не повезло. В конечном итоге я пытаюсь напечатать цикл, который показывает все элементы по умолчанию. Затем, когда пользователь выбирает флажок, он отфильтровывает те элементы, для которых ему присвоено значение false.

У меня есть следующая группа флажков и цикл: 

  <div class="container" id="clubs">
    <div class="filter">
        <label><input type="checkbox" v-model="selectedCategory" value="All" /> All</label>
        <label><input type="checkbox" v-model="selectedCategory" value="ClubParking" /> Parking</label>
        <label><input type="checkbox" v-model="selectedCategory" value="ClubToilets" /> Toilets</label>
        <label><input type="checkbox" v-model="selectedCategory" value="ClubFloodlights" /> Floodlights</label>
    </div>

    <ul class="clubs-list">
        <li v-for="club in filteredClubs">{{ club.clubName }}</li>
    </ul>
</div>

Тогда в моем приложении у меня есть следующий код 

var vm = new Vue({
    el:  "#clubs",
    data: {
        clubs: [
            { clubName: "Club One", clubParking: true, clubToilets: false, clubFloodlights: true },
            { clubName: "Club Two", clubParking: true, clubToilets: false, clubFloodlights: false },
            { clubName: "Club Three", clubParking: false, clubToilets: true, clubFloodlights: true },
        ],
        selectedCategory: "All"
    },
    computed: {
        filteredClubs: function() {
            var vm = this;
            var category = vm.selectedCategory;

            if(category === "All") {
                return vm.clubs;
            } else {

         return vm.clubs.filter(function(club) {
            return selectedFieldNames.every(fname=>club[fname])
             const selectedFieldNames =  selectedCategory.map(category=>{
                  switch(category){
                     case 'Toilets':
                      return 'clubToilets';
                     case 'Parking':
                      return 'clubParking';
                     case 'Floodlights':
                      return 'clubFloodlights';
                  }
            })

        });

            }
        }
    }
});

Я даже сделал Codepen Я лучше с рабочим модалом, чем могу вернуться, чтобы понять, почему я ошибаюсь. Любая помощь приветствуется, так как я не выходила из дома весь день, пытаясь заставить его работать.

1 Ответ

0 голосов
/ 04 мая 2019

Отредактировал ваш код, как описано в комментариях выше. 1. переместился из "string" selectedCategory в "array" 2. изменена фильтрация для работы с массивом 

var vm = new Vue({
	el:  "#clubs",
	data: {
		clubs: [
			{ clubName: "Club One", clubParking: true, clubToilets: false, clubFloodlights: true },
			{ clubName: "Club Two", clubParking: true, clubToilets: false, clubFloodlights: false },
			{ clubName: "Club Three", clubParking: false, clubToilets: true, clubFloodlights: true },
		],
		selectedCategories: ["All"]
	},
	computed: {
		filteredClubs: function() {
			if (this.selectedCategories.includes('All')) {
				return this.clubs;
			} else {
        return this.clubs.filter(club => {
          return this.selectedCategories.some(category => club[category])
        })
			}
		}
	}
});
.container {
	padding: 20px;
	width: 90%;
	max-width: 400px;
	margin: 0 auto;
}

label {
	display: block;
	line-height: 1.5em;
}

ul {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

li {
	padding: 8px 16px;
	border-bottom: 1px solid #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="container" id="clubs">
	<div class="filter">
		<label><input type="checkbox" v-model="selectedCategories" value="All" /> All</label>
		<label><input type="checkbox" v-model="selectedCategories" value="clubParking" /> Parking</label>
		<label><input type="checkbox" v-model="selectedCategories" value="clubToilets" /> Toilets</label>
		<label><input type="checkbox" v-model="selectedCategories" value="clubFloodlights" /> Floodlights</label>
	</div>
	
	<ul class="clubs-list">
		<li v-for="club in filteredClubs">{{ club.clubName }}</li>
	</ul>
</div>
...