Error Element Plus Dynamic Tab component in Vue 3

Question

How can i import Dynamic Component Content Field to my Tab in Element Plus in Vue 3? it's possible to do like that thank you for helping me

<template>
  <el-tabs v-model="activeName" class="kk-tab h-20 bg-[var(--white)]" @tab-click="handleClick">
    <el-tab-pane :label="tab.name" :name="tab.name" v-for="tab in tabName">
      <template #label>
        <div class="text-center space-y-2">
          <div class="kk text-[1.2rem] ">{{ tab.name }}</div>
        </div>
      </template>
      <div class="px-12 m-4">
        <component :is="tab.content"></component>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { GradSection } from '~/components/setting/GradSection.vue'
import { ScoreSetting } from '~/components/setting/ScoreSetting.vue'

const activeName = ref('បន្ទប់')

const tabName = reactive([
  {
    desc: 'បន្ទប់',
    name: 'Grad Section',
    content: <GradSection />
  },
  {
    desc: 'ការកំណត់ពិន្ទុ',
    anme: 'SCORE SETTING',
    content: <ScoreSetting />
  },
])

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>

Please help me to import component content in my json reactive

Answer 1

How to use dynamic components is here in the documentation: https://vuejs.org/guide/essentials/component-basics.html#dynamic-components

the value passed to :is can contain either:

• the name string of a registered component, OR
• the actual imported component object

So, for example, one of your tabName objects should be:

{
  desc: 'បន្ទប់',
  name: 'Grad Section',
  content: GradSection
}

Where GradeSection comes from the import statement.

I should note that your import statement is not typical. It's written as though GradSection.vue has a named export. Typically components are exported as default exports, especially if you're using <script setup>. So unless you know you're doing something atypical, the import statement should be

import GradSection from '~/components/setting/GradSection.vue'