javascript - vue 循环一个对象来渲染多个版本的组件

Question

我想将多个组件放在一个包装器中，所以它看起来像这样，

<div class="wrapper">
    <component />
    <component />
    <component />
</div>

我正在尝试以下，

<component
     v-for="person in persons"
     :key="person.key"
     :is="chooseType(person)"
     :person="person"
     :feed="person.self ? handle : aFunction(person)"
     :publisher="getPublisher(person)"
/>

我的问题是人员在运行chooseType组件时返回未定义，为什么会这样，人员对象不为空，所以确实有孩子。我怎样才能循环一个动态组件，因为我假设我做错了？

Answer 1

v-for与:is动态组件一起使用。如下请见

Vue.component('dynamic1', {
  template: '<div>Dynamic 1</div>'
})

Vue.component('dynamic2', {
  template: '<div>Dynamic 2</div>'
})

new Vue({
  el: "#app",
  data() {
    return {
      persons: [{
        name: 'dynamic1'
      }, {
        name: 'dynamic2'
      }]
    }
  },
  methods: {
    getComponent(comp) {
      return comp
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>

<div id="app">
  <component v-for="person in persons" :is="getComponent(person.name)"></component>
</div>