Problems with reactivity and computed properties Vue 3 - Composition API

Question

I have in principle this menu where there is:

the item 1 (number 1 painted orange) which has the following path : http://localhost:8080/#/documents

item 2 (number 2 painted orange) which has the following path: http://localhost:8080/#/documents/1

and item 3 (number 3 painted orange) which has the following path: http://localhost:8080/#/documents/2

When I click for example on item 2, the combobox that is marked with a blue box should be set to a default value and the items in the table should be filtered by this value as shown in the following screenshot:

So what I want is that when I click on item 1, I can, depending on the filters that I choose in the combos, filter or not the values that the table will show me. For this reason I have created 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;
            },
        });

And this method is executed when we receive from a child component the filters that we are going to apply.

function onEventFiltersForGrid(filters: any) {
            filter.value = filters;
        }

The method I have created to create the filters is as follows:

function createFilter(routeParams: any) {
            console.log(routeParams);
            if (routeParams.folderId === undefined || routeParams.folderId === '') {
                console.log('primer if');
                return [filterCategoryFolderId, '<>', null];
            }
            else if (routeParams.id !== undefined && routeParams.id !== '' && routeParams.id !== isNaN) {
                console.log('segundo if');
                return [
                    [filterCategoryFolderId, '=', Number.parseInt(routeParams.folderId)],
                    'and',
                    [filterId, '=', Number.parseInt(routeParams.id)]
                ];
            }
            else {
                console.log('else');
                return [filterCategoryFolderId, '=', Number.parseInt(routeParams.folderId)];
            }
        }

The problem I have is that when I select an item in the combo to build the new filtering of the table I get the following error: Write operation failed: computed value is readonly

I attach the html code:

<div>
    <document-list :filter="filter" :showFolder="true" :showCategory="true" :showType="true" :showSubType="true">
        <!-- Filtros -->
        <filter-hierarchy @EventFiltersForGrid="onEventFiltersForGrid($event)" :archivedId="archivedId"></filter-hierarchy>
    </document-list>
</div>

Hi! The computed one appears in the first block of code I write in the publication :) — Stella Esparza

RonaldT RonaldT · Accepted Answer · 2021-04-18T10:37:33

The error message you are getting is because a computed by default is a getter.

In the setup() with a standalone computed they show the following example: Example

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  },
})

plusOne.value = 1
console.log(count.value) // 0

So, where do you define the ref()?
You can get the value of the ref with .value

Computed getters/setters like this in the Options API:

let filter = computed({
            get() {
                console.log('get');
                return createFilter(route.params);
            },
            set(newValue: any) {
                console.log('set');
                route.params = newValue;
            },
        });

Problems with reactivity and computed properties Vue 3 - Composition API

1 Answers