Question

我正在尝试在键上过滤数组，其中键本质上是动态的。该复选框将为数组添加另一个键。有两种类型的乘坐[A，B]，当用户选择A时，只有A型乘车被显示，当用户选择B时，只有B型乘车被渲染，如果两者都被选中，则所有乘车都被渲染。 / p>

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

Answer 1

rideAfterFilter: function() {
  return this.rides.filter((ride) => {
    return this.rideFilter.includes(ride.type)
  });
}

通过Array.includes()，我们可以检查当前正在过滤的ride是否包含type数组中的rideFilter。

.filter()本身需要一个布尔值，.includes()提供它。

最后一件事：我在.filter()回调中使用了胖箭头语法，因为我们必须访问this作为当前的Vue实例。

使用JSFiddle：https://jsfiddle.net/yuriy636/p8Lsh88L/1/

编辑：在this中阅读.filter()后，我发现你可以将它作为第二个参数提供，所以如果你不想使用胖箭头语法，你可以使用它是这样的：

rideAfterFilter: function() {
  return this.rides.filter(function(ride)  {
    return this.rideFilter.includes(ride.type)
  }, this);
}

替代JSFiddle：https://jsfiddle.net/yuriy636/h6su1won/

基于多个键过滤数组，其中键本质上是动态的

1 个答案: