Vue JS loop с разными компонентами

Question

Я использую Vue JS, чтобы создать список, который имеет один общий элемент элемента списка.Если не существует ни одного универсального компонента, который соответствует правильному типу, будет использоваться пользовательский компонент.

 <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>

Приведенный выше код лучше иллюстрирует то, что я пытаюсь сделать.Кажется, у меня проблема из-за циклов, сначала создающих два списка, а затем проверяющих условия.Есть ли способ выбрать правильную вазу для компонента по типу, а затем перебрать список?

Данные, используемые для отображения этих компонентов, выглядят следующим образом:

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

Answer 1

Динамические компоненты делают это довольно легко в шаблоне:

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

Answer 2

Если я правильно понимаю, вам нужно v-for с динамическим компонентом.

, поэтому отметьте Официальное руководство Vue: динамический компонент , тогда демонстрационная версия будет выглядеть так, как показано ниже v-bind:is:

Vue.config.productionTip = false
Vue.component('email-queue-item', {
  template: `<div><h3 :style="{'background-color':color}">Email: {{color}}</h3></div>`,
  props: ['color']
})
Vue.component('message-queue-item', {
  template: `<div><h1 :style="{'background-color':color}">Message: {{color}}</h1></div>`,
  props: ['color']
})
new Vue({
  el: '#app',
  data() {
    return {
      items: [
        {'component':'email-queue-item', 'color':'red'},
        {'component':'message-queue-item', 'color':'blue'},
        {'component':'email-queue-item', 'color':'green'}
      ]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<div v-for="(item, index) in items" :key="index" :color="item.color" :is="item.component"></div>
</div>