Is it a Directus, Nuxt, or Vue bug or am I just too much of a Noob?

[PatrickSchutte]

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.

[Sandros94]

It would be faster and simpler to debug with a reproduction link, are you able even to provide a minimal, unstyled, one?

By the information shared so far, to me, it seems like you are trying to access data that is behind information stored in cookies (or just simply behind authentication). Could I ask you to share a bit more information about this?

Do you also see hydration errors in the console? This would indicate that the request is done multiple times per single page load (both server and client side) with different parameters each.

Also, keep in mind that if you are working with lists, like with a v-for, you must include a :key="..." so that Vue is able to distinguish any change made to each item in the array.