コンポーネントのリストを作成しv-forで表示したい


#1

.vueファイルの一部になります。

<template lang="pug">
  #items
    div( v-for="item in items" )
       | {{ item.component }}
</template>

<script>
import component1 from '@/components/component1.vue';
import component2 from '@/components/component2.vue';
import component3 from '@/components/component3.vue';

export default {
  components: {
    component1,
    component2,
    component3,
  },
  data() {
    return {
      items: [
        { category: '1', component: 'hogehoge' },
        { category: '1', component: 'mysite' },
        { category: '2', component: 'mysite2' },
      ]

    }
  }
}
</script>

現在このような感じで、
複数のコンポーネントがありそれをv-forで表示したいところですが
うまくいっていません。

componentをv-forで表示させる表示を
知っている方がいましたらよろしくおねがいします。。。


#2

動的に component を切り替えるのは、以下の方法で可能だったと思います (記憶曖昧)。数ヶ月前に試して、私はできました。

試してみてください。

Vue Guide
Dynamic & Async Components