Within this menu, there are different items:
Item 1 (marked as number 1 in orange) with the path: http://localhost:8080/#/documents
Item 2 (marked as number 2 in orange) with the path: http://localhost:8080/#/documents/1
Item 3 (marked as number 3 in orange) with the path: http://localhost:8080/#/documents/2 https://i.sstatic.net/Xn8k5.png
Upon clicking on item 2, the combobox highlighted with a blue box should reset to a default value, filtering the items in the table accordingly as shown in the screenshot below:
https://i.sstatic.net/UVZBd.png
Therefore, when clicking on item 1, I should be able to filter the table values based on the selected filters. To achieve this, I have implemented the following methods and properties:
let route = useRoute();
let filter = computed({
get: () => {
console.log('get');
return createFilter(route.params);
},
set: (newValue: any) => {
console.log('set');
route.params = newValue;
},
});
This method is triggered when we receive filter criteria from a child component.
function onEventFiltersForGrid(filters: any) {
filter.value = filters;
}
Here is the method I have created to generate the filters:
function createFilter(routeParams: any) {
console.log(routeParams);
if (routeParams.folderId === undefined || routeParams.folderId === '') {
console.log('first if');
return [filterCategoryFolderId, '<>', null];
}
else if (routeParams.id !== undefined && routeParams.id !== '' && routeParams.id !== isNaN) {
console.log('second if');
return [
[filterCategoryFolderId, '=', Number.parseInt(routeParams.folderId)],
'and',
[filterId, '=', Number.parseInt(routeParams.id)]
];
}
else {
console.log('else');
return [filterCategoryFolderId, '=', Number.parseInt(routeParams.folderId)];
}
}
The issue I am facing is that when I choose an item in the combo to create new filters for the table, I encounter the error message: Write operation failed: computed value is readonly.
https://i.sstatic.net/rWeh2.png
Below is the HTML code snippet:
<div>
<document-list :filter="filter" :showFolder="true" :showCategory="true" :showType="true" :showSubType="true">
<!-- Filters -->
<filter-hierarchy @EventFiltersForGrid="onEventFiltersForGrid($event)" :archivedId="archivedId"></filter-hierarchy>
</document-list>
</div>