Vue.js - 过滤嵌套数组

Question

我正在尝试在 Vue.js 中的对象数组内的嵌套数组上过滤 a。 这是组件代码的片段：

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?

由于数组为空，无法更新页面上的数据。

如何删除空数组？

Answer 1

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