[Vuejs]-How to exclude an item in v-for loop?

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?

Leave a comment