如何根据循环中返回的数据呈现外部vue文件？

Question

我正在使用Prime的选项卡面板(https://primefaces.org/primevue/tabview)，并且我试图仅使用一个v-for循环来呈现每个选项卡内容的vue文件。{{ tab.content }}是一个外部vue文件。我可以呈现它的html视图吗？

到目前为止，这是我的代码：

​

<TabView scrollable>
  <TabPanel v-for="tab in tabs" :key="tab.title">
    <template #header>
      <img
        :src="tab.src"
        :width="tab.width"
        :height="tab.height"
      />
      <span x-style="margin-left: 10px;">{{ tab.title }}</span>
    </template>
    <div>{{ tab.content }}</div>
  </TabPanel>
</TabView>

​

我导入了外部vue文件(CreateEmployee.vue)，这是一个应该呈现的文件。tabs数组位于下面的脚本标记中：

​

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import * as yup from 'yup'

import FormWizard from '@/components/stepper/FormWizard.vue'
import FormStep from '@/components/stepper/FormStep.vue'
import TabView from 'primevue/tabview'
import TabPanel from 'primevue/tabpanel'
import { useConfirm } from 'primevue/useconfirm'
import KustomerCreateEmployee from '@/views/apps/kustomer/CreateEmployee.vue'
let tabs: string[] = reactive([
  { 
    src: '/src/assets/apps/logo-1password.svg', 
    width: '30',
    height: '30',
    title: '1Password',
    content: KustomerCreateEmployee
  },
]);
</script>

​

最后，这是应该在循环中呈现的外部vue文件：

​

<template>
    <input type="text" placeholder="Sample" />
</template>

​

我确实尝试过使用这些代码，但只得到了以下结果：

{ "__hmrId": "0429c5db", "__file": "/Users/jumarj.multiplymii/Documents/Jumar's Files/Work Related/Projects/Web Development/sandbox/dev-boarding-pass/client/src/views/apps/kustomer/CreateEmployee.vue" }

有什么帮助吗？

Answer 1

因为在当前代码中，不需要每次遍历循环就更改vue模板，所以不需要做任何涉及到的事情。

<TabView scrollable>
  <TabPanel v-for="tab in tabs" :key="tab.title">
    <template #header>
      <img
        :src="tab.src"
        :width="tab.width"
        :height="tab.height"
      />
      <span x-style="margin-left: 10px;">{{ tab.title }}</span>
    </template>
    <KustomerCreateEmployee />    

<!-- you can use the other parameters in your tab object to initialize any parameters you need to pass down to the component -->
  </TabPanel>
</TabView>

Answer 2

我使用:is属性解决了这个问题，并允许组件使用block属性并传递当前的block对象本身。然后在组件中循环时添加:key即可。

​

<TabPanel v-for="tab in tabs" :key="tab.title">
  <template #header>
    <img
      :src="tab.src"
      :width="tab.width"
      :height="tab.height"
    />
    <span x-style="margin-left: 10px;">{{ tab.title }}</span>
  </template>
  <div><component :is="tab.content" :key="tab.title"></component></div>
</TabPanel>

​