다른 구성 요소가 있는 Vue JS 루프

다른 구성 요소가 있는 Vue JS 루프

나는 하나의 일반적인 목록 항목 구성요소가 있는 목록을 만들기 위해 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:[
        {...},
        {...},
        ...
    ]
}

동적 구성요소를 통해 템플릿에서 손쉽게 구성 가능:

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

내 말이 맞다면 동적 구성요소가 포함된 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>

참조URL: https://stackoverflow.com/questions/50418757/vue-js-loop-with-different-components