如何从循环内的返回数据呈现外部 vue 文件？答案

【问题标题】：How to render an external vue file from return data inside a loop?如何从循环内的返回数据呈现外部 vue 文件？
【发布时间】：2022-10-21 21:19:09
【问题描述】：

我正在使用 Prime Vue 的选项卡面板 (https://primefaces.org/primevue/tabview)，并且我试图仅使用 v-for 循环为每个选项卡内容呈现 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>
    <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>

我确实尝试过，但使用{{ tab.content }} 得到了这个结果

{ "__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" }

请问有什么帮助吗？

【问题讨论】：

标签： arrays vue.js loops v-for slot

【解决方案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>

【讨论】：