Javascript Vue.js-筛选嵌套数组

我尝试在Vue.js中的对象数组中的嵌套数组上筛选。下面是一段组件代码：

computed: {
          filteredProducts: function () { // https://codepen.io/arhey/pen/QrbxdX
            return this.products.map(product => {
                return product.filter(p => {
                    return this.powers.includes(p.total_power_lamps);
                });
            });
        }
    },

因此，数据会被过滤，但不会在页面上更新

filteredProducts: Array[6]
0: Array[2] <- Filtered!
1: Array[2] <- Filtered!
2: Array[0] <- Remove?
3: Array[0] <- Remove?
4: Array[0] <- Remove?
5: Array[0] <- Remove?

filteredProducts:Array[6]
0:Array[2]函数
map
返回与原始数组长度相同的数组，我建议使用
filter
而不是
map
仅返回填充的数组：

computed: {
          filteredProducts: function () { 
            return this.products.filter(product => {
                return product.filter(p => {
                    return this.powers.includes(p.total_power_lamps);
                }).length>0;//return only filled arrays
            });
        }
    },

您是否尝试过用
v-if=“product！=null”
跳过组件中的空字段？如何筛选多个字段？如果选择了一个过滤器，则触发“或”，如果选择了两个或更多过滤器，则触发“和”<代码>返回此功率包括（p.总功率灯）和此材料包括（p.材料）和此灯包括（p.计数灯）