My webpage contains a list of objects, each with its own checkbox for selection. There is also a 'Select all' checkbox at the top to select all objects at once:
[ ] Select all
[ ] Object 1
[ ] Object 2
[ ] Object 3
The problem arises when I have around 100 objects and click on "Select all," causing the webpage to freeze for a few seconds. Even after removing the search bar meant to filter objects, the performance remains sluggish. Each object has a property called selected to track its selection status. Here are excerpts from my code:
HTML:
<checkbox-input
id="documentSelectAll"
:model-value="operatingRows.length === 0 ? false : allSelected"
@update:modelValue="allSelectPressed"
/>
---
<tr
v-for="(row, index) in operatingRows"
:key="index"
>
<document-table-row
:row-idx="index"
:row-data="row"
:fields="row.fields"
:hidden-column-indices="hiddenColumnIndices"
@toggleSelectedOnRow="toggleSelectedOnRow(row.id)"
/>
</tr>
Computed properties:
operatingRows() {
const showRow = (r) => {
// Search logic omitted
};
return this.sorted.filter(showRow);
},
selectedRows() {
return this.operatingRows.filter((r) => r.selected);
},
numSelected() {
return this.selectedRows.reduce((prev, cur) => (cur.selected ? prev + 1 : prev), 0);
},
allSelected() {
return this.numSelected === this.operatingRows.length;
},
Vuex store:
getters: {
...storeStateGetters,
sorted: (state) => state.sorted,
},
---
mutations: {
...storeStateMutations,
SET_ALL_SELECTED_ON_SORTED(state, isSelected) {
state.sorted.map((r) => {
const rn = r;
rn.selected = isSelected;
return rn;
});
},
},
I suspect that the performance issues may be related to having too many computed properties. Despite attempting to remove them one by one, along with their associated code, the sluggishness persists. It seems that it's not tied to any specific piece of code but rather an architectural concern.
Any assistance on this matter would be greatly appreciated.