我正在尝试过滤键上的数组，其中键本质上是动态的。该复选框将向数组添加另一个键。 有两种类型的骑行[A，B]，当用户选择A时，仅显示A类型的骑行，当用户选择B时，仅呈现B类型的骑行，如果两者都选择，则渲染所有游乐设施。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
<div id="filters">
<input type="checkbox" name="filter" value="A" v-model="rideFilter"> Ride Type A
<input type="checkbox" name="filter" value="B" v-model="fileFilter"> Ride Type B
</div>
<div id="rides">
<ul>
<li v-for="ride in rideAfterFilter">
{{ride.src}} - {{ride.dest}}
</li>
</ul>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
rides: [
{src:'A',dest:'G',type:'A'},
{src:'B',dest:'H',type:'B'},
{src:'C',dest:'A',type:'A'},
{src:'D',dest:'B',type:'B'},
{src:'E',dest:'E',type:'C'},
{src:'F',dest:'D',type:'D'},
],
rideFilter:[]
},
computed:{
rideAfterFilter:function (){
this.rides.filter(function(ride){
//here
});
}
}
});
</script>
</body>
</html>
rideAfterFilter: function() {
return this.rides.filter((ride) => {
return this.rideFilter.includes(ride.type)
});
}
通过使用Array.includes()我们可以检查当前正在过滤的ride是否包含rideFilter数组中的type。
.filter()本身需要一个布尔值，而.includes()提供了布尔值。
最后一件事：我在.filter()回调中使用了胖箭头语法，因为我们必须将this作为当前的 Vue 实例进行访问。
工作JSFiddle：https://jsfiddle.net/yuriy636/p8Lsh88L/1/
编辑：在阅读了.filter()中关于this的一些内容后，我发现您可以将其作为第二个参数提供，因此，如果您不想使用胖箭头语法，则可以像这样使用它：
rideAfterFilter: function() {
return this.rides.filter(function(ride) {
return this.rideFilter.includes(ride.type)
}, this);
}
替代JSFiddle：https://jsfiddle.net/yuriy636/h6su1won/