Question

我有一个单页应用程序，我试图根据array（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

SELECT  "qr_codes".value FROM "qr_codes" WHERE "qr_codes"."codeable_id" = $1 AND "qr_codes"."codeable_type" = $2 LIMIT 1  [["codeable_id", 1], ["codeable_type", "Vehicle"]]

并在父级中渲染：

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

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

根据数组项目值动态导入组件

1 个答案: