3👍
✅
You should create a computed value that filters items for render.
In your case:
Composition API:
const customFieldsToRender = computed(() => item.value?.customFields?.filter((f) => f.type !== "hidden")) || [];
Options API:
customFieldsToRender() {
return this.item?.customFields?.filter((f) => f.type !== "hidden")) || [];
}
And then render fields by this computed value
<span v-for="(customField, index) in customFieldsToRender" :key="index">
{{ customField.value }}
</span>
Also, I see you use index as a key in v-for loop. It is a bad practice. Here is well explained why it is – Why not always use the index as the key in a vue.js for loop?
Source:stackexchange.com