如何通过使用复选框显示不同的结果来过滤VUEJS循环

Question

我在应用过滤器时遇到麻烦，而将复选框使用到结果列表中，需要一些帮助。

当前，只有"所有"选项似乎应用了任何过滤逻辑。

我的html包含我的过滤器和循环如下：

<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="Parking" /> Parking</label>
        <label><input type="checkbox" v-model="selectedCategory" value="Toilets" /> Toilets</label>
        <label><input type="checkbox" v-model="selectedCategory" value="Floodlights" /> Floodlights</label>
    </div>
    <ul class="clubs-list">
        <li v-for="club in filteredClubs">{{ club.clubName }}</li>
    </ul>
</div> 

然后，我的vuejs应用程序中的代码如下：

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 club.clubParking === category;
                });
            }
        }
    }
});

任何帮助，因为我被困了几个小时。

Answer 1

您需要更新过滤器以检查类别，然后在字段上过滤。

return vm.clubs.filter(function(club) {
  switch(category){
     case 'Toilets':
      return club.clubToilets;
     case 'Parking':
      return club.clubParking;
     // etc...
  }
});

您可以通过设置字段名称来重构。

return vm.clubs.filter(function(club) {
  let fname;
  switch(category){
     case 'Toilets':
      fname ='clubToilets';
     case 'Parking':
      fname = 'clubParking';
     // etc...
  }
  return club[fname]
});

您还可以简单地将"选择为您的字段名称"的值直接使用。但是，这可能会限制您其他逻辑。

<label><input type="checkbox" v-model="selectedCategory" value="clubParking" /> Parking</label>

return vm.clubs.filter(function(club) {
  return club[category];
}

最重要的是必须将类别映射到对象中的字段名称。

对于多个项目：

// Map the field names depending on your checkbox values. `selectedCategory` should be an array.
const selectedFieldNames =  selectedCategory.map(category=>{
      switch(category){
         case 'Toilets':
          return 'clubToilets';
         case 'Parking':
          return 'clubParking';
         // etc...
      }
})
// selectedFieldNames now contains the names of your object fields
// This will now return all items that have all those fields set to 'true'
return vm.clubs.filter(function(club) {
  return selectedFieldNames.every(fname=>club[fname])
}

根据您发布的代码工作示例。

注意：这确实可以使用一些清理，但是我以您可以比较您的工作和我们的工作的格式。

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: []
	},
	computed: {
		filteredClubs: function() {
			var vm = this;
			var categories = vm.selectedCategory;
      
			if (categories.includes("All")) {
				return vm.clubs;
			} else {
				const selectedFieldNames = categories.map(category => {
					switch (category) {
						case "ClubToilets":
							return "clubToilets";
						case "ClubParking":
							return "clubParking";
						case "ClubFloodlights":
							return "clubFloodlights";
					}
				});
				return vm.clubs.filter(function(club) {
					return selectedFieldNames.every(fname=>club[fname])
				})			
			}
		}
	}
});

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