Динамический импорт компонентов на основе значений элементов массива

Question

У меня есть одностраничное приложение, и я пытаюсь импортировать и отображать компоненты, основываясь на том, какие компоненты существуют в массиве (blockCount).Я сохраняю несколько строк (имя компонента) в указанном массиве.

Vue:
computed: {
    componentInstance () {
        for(var i = 0; i < this.blockCount.length; i++){
            return () => import(`@/components/${this.blockCount[i]}`)                    
        }
    }
},


Html:
<component v-for="component in blockCount" :is="componentInstance" />

Таким образом, проблема в том, что функция останавливается на item [0] и просто выполняет итерацию этого элемента.И я не совсем уверен, как динамически выполнять эту функцию.

Answer 1

Возможно, вы захотите определить дочерний компонент

ChildComponent.vue

<template>
  <component :is="componentInstance" />
</template>

<script>
export default {
  props: ['componentName'],
  computed: {
    componentInstance() {
      return () => import(`@/components/${this.componentName}`)                    
    }
  }
}
</script>

и сделать в родительском:

<child-component v-for="(component, index) in blockCount" :key="index" :componentName="component"/>