vue цикл объекта для рендеринга нескольких версий компонента - PullRequest
Новая
       3

vue цикл объекта для рендеринга нескольких версий компонента

0 голосов
/ 14 июля 2020

Я хочу поместить несколько компонентов в оболочку, чтобы это выглядело так: 

<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)"
/>

Моя проблема в том, что этот человек возвращается как undefined при запуске компонента chooseType, почему это может быть, объект people не равен нулю, поэтому у него есть дочерние элементы. Как я могу использовать oop компонент Dynami c, если я предполагаю, что делаю это неправильно?

1 Ответ

0 голосов
/ 14 июля 2020

v-for используется вместе с :is в компоненте Dynami c. Пожалуйста, найдите ниже 

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