How to render an external vue file from return data inside a loop?-CodePudding

I was using Prime Vue's tab panel (https://primefaces.org/primevue/tabview) and I'm trying to render the vue file for each tab content only with a v-for loop. The {{ tab.content }} is an external vue file. Is that possible for me to render the html view of it?

This is my code so far:

<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>

I imported the external vue file (CreateEmployee.vue) which is the one that should be rendered. The tabs array is in the script tag below:

<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>

And lastly, this is the external vue file that should render on the loop:

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

I did try with these code but was only getting this result:

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

Any help please?

CodePudding user response：

Because in your current code you're not changing the vue template with each pass through the loop you don't need to do anything quite so involved

<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>

CodePudding user response：

I solved it by using :is attribute, and to allow the component to use block property and pass the current block object itself. Then just add :key while looping in the component.

<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>