为什么复选框过滤在VueJS中不起作用？

Question

Been trying for 8 hours now to get this to work and still no luck. Ultimately, what I am trying to do is print a loop which shows all items by default. Then when a user selects a checkbox it will filter out those items where they are set to false.

I have the following group of checkboxes and a loop:

  <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>

Then in my application I have the following code

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';
                  }
            })

        });

            }
        }
    }
});

I have even made a Codepen I am better with a working modal then I can backtrack to see why I have been going wrong. Any help welcome as I have'nt left the house all day trying to get it to work.

Answer 1

Edited your codepen as discussed on comments above. 1. moved from "string" selectedCategory to "array" 2. changed filtering to work for array

 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>