如何计算多次存在的javascript对象的内容

Question

所以我有一个包含大约 12 个边界框的页面，每个框都有 6 个复选框，当一个复选框被选中/取消选中时，一个对象正在使用 v-model 获取一个值。

现在我需要一个显示每个选中复选框数量的动态徽章。

以下对于每个边界框都是唯一的，我需要的是 selection[] 对象。 虽然我可以使用 Object.keys(selection).length 获得单个边界框的对象长度，但我真的不知道如何计算多个这些对象的长度。

                            v.clickboxes.push({
                                id:arraySelects[i].getAttribute('id'), 
                                x:bb.x,
                                y:bb.y,
                                width:bb.width,
                                height:bb.height,                          

                                settings:{
                                    selection:[],  
                                    }
                            });

我尝试计算选择对象的长度是创建一个方法，该方法在单击复选框时被调用，并且函数作为参数获取选择对象。

 badgenumber:function(selection)
                        {
                            var v = this;

                            v.badgeamount  = Object.keys(selection).length;

                            console.log(v.badgeamount);
                      
                        },

像这样，它总是只在当前边界框仍处于关闭状态时才获得选中的值，因为当您选中第一个复选框时，它的值为 0，而当您取消选中边界框时，它仍然计数。

有人告诉我使用 for 循环将所有选择对象中的所有元素一起计数，然后将其分配给一个变量，但我真的不知道该怎么做。

Answer 1

我想你有一个函数，一旦你选中一个框，你就会调用它！

因此，您可以添加一个数组类型的属性 [在全局范围内]，所有 12 个边界框都可以访问该属性，一旦您选中任何边界框内的一个框，您就可以到达该边界框之外以存储每个选定的数量该属性中的复选框。