Is it a Directus, Nuxt, or Vue bug or am I just too much of a Noob? #228
Description
Hello and thank you for a fantastic product.
Essentially, I have a child component & once I've added, changed, or deleted an item,the data is refreshed but the child component is not re-rendered. So basically I force a refresh by adding a :key="entityReload" to the component.
The parent component's code portion is:
....
const filters = { status: 'published' };
const params = {
filter: filters,
};
...
and the child's component portion is:
....
params: {
type: Object,
required: true,
// default: () => {},
},
});
console.log(props.params);
const { getItems } = useDirectusItems();
const items = await getItems({
collection: props.link,
params: props.params,
});
....
The first time it runs, it works fine with console.log showing:
Object { filter: {…} }
filter: '{"status":"published"}'
<prototype>: Object { … }
TdBaseEntities.vue:47:9
but once I do an entry and force a refresh, the filter mutates giving me and error with the console.log showing:
Object { filter: '{"status":"published"}' }
filter: '"{\\"status\\":\\"published\\"}"'
<prototype>: Object { … }
TdBaseEntities.vue:47:9
To date I have worked around this by putting the filter into an array where it then remains untouched.
Parent:
...
const filters = [{ status: 'published' }];
const params = {
filter: filters,
};
...
Child:
...
params: {
type: Object,
required: true,
// default: () => {},
},
});
const queryParams = computed(() => {
if (props.params.fields) {
return { filter: props.params.filter[0], fields: props.params.fields };
} else {
{
return { filter: props.params.filter[0] };
}
}
});
console.log(props.params);
const { getItems } = useDirectusItems();
const items = await getItems({
collection: props.link,
params: queryParams.value,
});
...
The console.log now shows:
Some cookies are misusing the recommended “SameSite“ attribute 2
Object { filter: (1) […] }
filter: Array [ {…} ]
0: Object { status: "published" }
length: 1
<prototype>: Array []
<prototype>: Object { … }
TdBaseEntities.vue:47:9
So it is essentially ignoring the Samesite="None" with the re-rendering. Not to serious as I will stick it in a composable to bypass it.