Vue JS loop with different components

Question

I am using Vue JS to make a list that has one generic list item component. If there exists a none generic component that meets the correct type a custom component will be used.

 <email-queue-item v-for="item in queue"
                          :key="item.id"
                          :item="item"
                          v-if="type == 'EmailMessage'"></email-queue-item>
        <queue-item v-for="item in queue"
                          :key="item.id"
                          :item="item"
                          v-else></queue-item>

The code above better illustrates what I am trying to do. The problem I seem to have is due loops first creating two list and then checks the conditional. Is there a way in due to pick the right component vase on the type and then loop through the list?

The data Used to display these components is like this:

{
    name: Email,
    type: EmailMessage,
    data:[
        {...},
        {...},
        ...
    ]
}

Answer 1

Dynamic components make this pretty easy in the template:

<component
    :is="type == 'EmailMessage' ? 'email-queue-item' : 'queue-item'"
    v-for="item in queue"
    :key="item.id"
    :item="item"
/>